颤动 SVG 渲染

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

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

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

184438 次浏览
小开
最佳答案

Flutter 目前不支持 SVG。请按照 第1831期更新。

如果你确实需要矢量绘图，你可以看看 Flutter Logo 小部件作为如何使用 Canvas API 绘图的例子，或者在本机端栅格化你的图像，并将其作为位图传递给 Flutter，但是现在你最好的选择可能是嵌入高分辨率栅格化的资产图像。

小开

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

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)

小开

字体在很多情况下都是一个很好的选择。

我一直在开发一个在画布上呈现 SVG 的库，可以在这里找到: Https://github.com/dnfield/flutter_svg

到目前为止，API 看起来类似于

new SvgPicture.asset('asset_name.svg')

呈现 asset _ name。Svg (大小为其父节点，例如 SizedBox)。还可以指定用于着色资产的 color和 blendMode。.

现在可以在酒吧使用，最小版本是 Flutter 0.3.6。它可以处理很多案件，但不是所有案件——查看 GitHub 的回购更新和文件问题。

Colin Jackson 引用的最初的 gitHub 问题实际上并不意味着主要关注 Flutter 的 SVG。我在这里为此打开了另一个问题: https://github.com/flutter/flutter/issues/15501

小开

Flutter 社区的开发人员创建了一个库来处理 svg 文件

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

我找到了 SVG 实施的一个小例子。

小开

您可以使用耀斑来创建动画，只需将.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");
}
}

访问耀斑 _ 扑动 https://pub.dev/packages/flare_flutter

小开

您可以按照以下步骤操作
- 请浏览 http://fluttericon.com
- 上传你的 SVG 图标
- 点击下载按钮
你会得到两份文件
1. iconname.dart < br > 2. iconname.ttf 字体文件 < br > - 在 flutter & import iconname.dart < br >

中使用此文件
小开

您可以使用此库呈现 SVG 图像 -https://pub.dev/packages/flutter_svg

例子-

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

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

dependencies:
flutter_svg: any

版本的优点是你可以在任何 SDK 版本中使用 但是依赖项版本是最重要的，所以为您的依赖项添加合适的版本。

步骤2。 进口应用程序中的 flutter svg 包

 import 'package:flutter_svg/flutter_svg.dart';

第三步，只要像下面这样使用

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

enter image description here

颤振支承特殊类型

如果有样式标签，则不加载 svg 图像在扑动 颤振支持在线造型

小开

可能感兴趣的是: 有一个较新的 Flutter SVG 库，名为 jovial _ SVG。我编写它是为了处理比当时在 pub.dev 上能够找到的更健壮的 SVG 子集。当我在做这个工作的时候，我还制作了一个可以编译 SVG 资产的二进制格式。它更加紧凑，阅读速度是原来的10倍左右，因此对于与应用程序一起打包的资产来说，它是一个很好的选择。

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

小开

颤振中的心率

  1. 在 pubspec.yaml 中添加包

    从属关系: Flutter _ svg: any

    资产:
    - 资产/图像/

  2. 插入 svg。

    SvgPicture.asset (‘ asset/images/password-icon. svg’, 宽: 24，高: 29.2) ,

小开

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

这些是所涉及的步骤。

将所有 svg 文件保存在一个文件夹中。 使用上传器将它们全部上传到 fluttericon。 您可以选择所有这些，并拖放在现场。 在顶部给你的图标一个省道类名称: 如，Svgicon

选择所有图标并按下载。

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

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

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

导入将要使用图像的 svgicon _ icon. 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，它曾经是一个 String，引用最初的 svg 图像。

显示 ttf

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

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


提交答案