FlutterSVGレンダリング

SVGソースを含む画像をフラッターアプリケーションに追加してみました。

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

しかし、視覚的なフィードバックは得られませんでした。FlutterでSVG画像をレンダリングするにはどうすればよいですか？

Flutterは現在SVGをサポートしていません。更新については、問題1831に従ってください。

ベクター描画がどうしても必要な場合は、APIを使用して描画する方法の例として、Flutter Logoウィジェットを表示するかCanvas、ネイティブ側で画像をラスタライズしてビットマップとしてFlutterに渡すことができますが、今のところ最善の策はおそらく高解像度のラスタライズされたアセット画像を埋め込みます。

フォントは多くの場合に最適なオプションです。

私はSVGをキャンバスにレンダリングするためのライブラリに取り組んでいます。https：//github.com/dnfield/flutter_svgから入手できます。

現在のAPIは次のようになります

new SvgPicture.asset('asset_name.svg')

Asset_name.svgをレンダリングします（親に合わせたサイズ、たとえばa 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実装の小さな例を見つけました。

今のところ回避策はフォントを使用することです

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）

あなたは、手順の下に従うことができます
-訪問http://fluttericon.com
-あなたのSVGのアイコンをアップロードし
、ダウンロードボタンをクリックしてください-
あなたは二つのファイルを取得します-
1. iconname.dart
2. iconname.ttfフォントファイルを
-フラッターでこのファイルを使用して＆ iconname.dartをインポートします

フレアを使用してアニメーションを作成し、.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にアクセスします

このライブラリを使用してSVG画像をレンダリングできます-https：//pub.dev/packages/flutter_svg

例-

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