Flutter SVG 渲染

Question

我尝试将带有 SVG 源的图像添加到我的 flutter 应用程序中。

new AssetImage("assets/images/candle.svg"))

但是我没有得到任何视觉反馈。如何在 Flutter 中渲染 SVG 图片？

Answer 1

Flutter 目前不支持 SVG。关注 issue 1831 获取更新。

如果您绝对需要矢量绘图，您可以查看 Flutter Logo widget 作为如何使用 Canvas API 绘图的示例，或者在本机端光栅化图像并通过它作为位图发送到 Flutter，但目前你最好的选择可能是嵌入高分辨率光栅化资产图像。

Answer 2

目前的解决方法是使用字体

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

使用

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

替换 ### 例如 (906)

Answer 3

在很多情况下，字体都是不错的选择。

我一直在开发一个库来在 canvas 上渲染 SVG，可在此处获取： https://github.com/dnfield/flutter_svg

目前的 API 看起来像

new SvgPicture.asset('asset_name.svg')

以呈现 asset_name.svg（大小与其父级一致，例如 SizedBox）。您还可以指定 color 和 blendMode 来为资产着色..

它现在可以在 pub 上使用，最低版本为 Flutter 0.3.6。它处理了很多情况，但不是所有情况 - 请参阅 GitHub 存储库以获取更新和文件问题。

Colin Jackson 引用的原始 GitHub 问题实际上并不是主要关注 Flutter 中的 SVG。我为此打开了另一个问题：https://github.com/flutter/flutter/issues/15501

Answer 4

Flutter 社区的开发人员创建了一个库来处理 svg 文件。我们可以将其用作

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

我找到了一个 SVG 的小例子 implementation here。

Answer 5

您可以使用 flare 创建动画，只需将 .flr 作为资源导入即可

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  }
}

访问flare_flutterhttps://pub.dev/packages/flare_flutter

Answer 6

您可以按照以下步骤操作
- 访问 http://fluttericon.com
- 上传您的 SVG 图标
- 点击下载按钮
- 你会得到两个文件
1. iconname.dart
2. iconname.ttf 字体文件
- 在 flutter 中使用此文件并导入 iconname.dart

Answer 7

您可以使用此库来渲染 SVG 图像 - https://pub.dev/packages/flutter_svg

例子-

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)

Answer 8

第 1 步。在 pubspec.yaml

中添加依赖项

dependencies:
     flutter_svg: any

any 版本的优势在于您可以在任何 SDK 版本中使用

第 2 步。在您的应用中导入 flutter svg 包

 import 'package:flutter_svg/flutter_svg.dart';

步骤 3. 如下使用即可

 SvgPicture.asset(
    'assets/images/bm-icon1.svg',
     width: 18.0,
     height: 18.0,
  ),

Answer 9

flutter 支持特殊类型的 svg

如果有样式标签则不会在 flutter 中加载 svg 图片 flutter 支持 svg 中的内联样式

Answer 10

可能感兴趣：有一个更新的 Flutter SVG 库，名为 jovial_svg。我编写它是为了处理比我当时在 pub.dev 上能够找到的更强大的 SVG 子集。在我做这件事的同时，我还制作了一种二进制格式，SVG 资源可以编译成这种格式。它更加紧凑，阅读速度提高了大约 10 倍，因此它是您与应用程序打包的资产的不错选择。

图书馆在https://pub.dev/packages/jovial_svg

Answer 11

颤振中的 Svg https://pub.dev/packages/flutter_svg

在pubspec.yaml
中添加包
依赖项： flutter_svg：任意

资产：
-assets/images/
插入 svg。

SvgPicture.asset('assets/images/password-icon.svg', 宽度：24，高度：29.2),

Flutter SVG 渲染

Flutter SVG rendering

dart

flutter