如何在 Flutter SDK 中使用 SVG 或 Vector Drawable

Posted 2023-02-23

【中文标题】如何在 Flutter SDK 中使用 SVG 或 Vector Drawable

【英文标题】：How to Use SVG or Vector Drawables in Flutter SDK

【发布时间】：2019-09-17 04:57:02

【问题描述】：

我想在我的 Flutter 应用程序中使用 SVG/矢量图形。 有没有可以使用的库或 Dart 包？

【参考方案1】：

在 Flutter 中显示来自 Assets 的 SVG。

在依赖项下的pubspec.yaml文件中添加以下代码 flutter_svg: ^0.22.0 在 main.dart 的标头中添加以下代码 import 'package:flutter_svg/flutter_svg.dart'; 将 SVG 分配给一个变量，例如 final String assetName = 'assets/images/avatar.svg'; new SvgPicture.Asset(assetName, height:100, width:100,)

【讨论】：

遗憾的是，flutter_svg 极其有限。大多数开箱即用的 SVG 实际上都不起作用。

【参考方案2】：

步骤

使用这个插件flutter_svg https://pub.dartlang.org/packages/flutter_svg 向资产添加图片 导入并添加这个小部件

SvgPicture.asset('assets/images/Defect/icon$values[index].childId.svg', height: 50.0,),

【讨论】：

RR：当前 Flutter SDK 版本为 1.17.3。因为flutter_svg需要Flutter SDK版本>=1.18.0-6.0.pre

要使用这个库，请从 Flutter 稳定通道更改为 Flutter beta 通道。运行：“flutter channel beta”和“flutter upgrade”。