Flutter SVG渲染

Question

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

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

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

Answer 1

Flutter目前不支持SVG.按照问题1831进行更新.

如果你绝对需要矢量绘图,你可以看到Flutter Logo小部件作为如何使用CanvasAPI 绘制的示例,或者在本机光栅化你的图像并将其作为位图传递给Flutter,但是现在你最好的选择可能是嵌入高分辨率栅格化资产图像.

Answer 2

对于很多情况,字体是一个很好的选择.

我一直在创建一个库来在画布上渲染SVG,可以在这里找到:https: //github.com/dnfield/flutter_svg

现在的API看起来像

new SvgPicture.asset('asset_name.svg')

渲染asset_name.svg(大小为其父级,例如a SizedBox).您还可以指定a color和blendMode用于着色资产.

它现在可以在酒吧上使用,并且至少使用Flutter版本0.3.6.它处理一堆案例,但不是一切 - 请参阅GitHub仓库以获取更新和文件问题.

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

Answer 3

Flutter 为句柄svg文件创建了一个新的lib flutter_svg:^ 0.5.0`.我们可以用它作为

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

Answer 4

现在的解决方法是使用字体

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 5

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

Answer 6

步骤 1. 在 pubspec.yaml 中添加依赖项

dependencies:
     flutter_svg: 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 7

步骤1：

flutter_svg: ^0.12.4

第2步：

import 'package:flutter_svg/flutter_svg.dart';

第三步：

SizedBox.fromSize(
      child:  SvgPicture.asset(
        'assets/empty.svg',
      ),
      size: Size(300.0, 400.0),
    ),     

Answer 8

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

例子 -

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

Answer 9

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

该库位于https://pub.dev/packages/jovial_svg

Answer 10

我通过在 fluttericon.com 将 svg 图像转换为 ttf 解决了类似的问题。

这些是涉及的步骤。

将所有 svg 文件保存在一个文件夹中。使用那里的上传器将它们全部上传到 fluttericon。您可以选择所有这些并拖放到该位置。在顶部为您的图标指定一个 dart 类名称：例如 Svgicons

选择所有图标并按“下载”。

它将下载一个 zip 文件，其中包含 dart 文件和包含 Svgicons.ttf 的字体文件夹。

将 fonts 文件夹复制到您的项目文件夹，并将其作为 pubspec.yaml 中的资产引用。

fonts:
  - family: Svgicons
    fonts:
      - asset: fonts/Svgicons.ttf

导入 svgicons_icons.dart 您将在其中使用图像。样本：

import '../svgicons_icons.dart';

import 'social_media.dart';

class SocialMediaRepository {
  List<SocialMedia> getSocialMedia = [
    SocialMedia(id: 1, title: "Facebook", iconAsset:Svgicons.facebook, isFavorite: false),
    SocialMedia(id: 2, title: "Instagram", iconAsset: Svgicons.instagram, isFavorite: false),
    SocialMedia(id: 3, title: "LinkedIn", iconAsset: Svgicons.linkedin, isFavorite: false),
    ....

这里的 iconAsset 是 IconData 类型，它最初是一个引用 svg 图像的字符串。

使用以下命令显示 ttf

    ...
    Icon(item.iconAsset),
    SizedBox(width: 10),
    Text(item.title),
  ],
),

其中 item 是包含 IconData 的对象。现在您可以从项目中删除对 svg 图像的引用。