FlutterでSVG画像を表示する

SVG画像を表示するには

• SVGファイルをassetsに保存する
• pubspeck.ymlにSVGファイルパスを追加する
• flutter_svg パッケージを使用して画面表示する

SVGファイルをassetsに保存する

プロジェクト内の assetsディレクトリ にsvg画像を保存する。

assetsディレクトリがなければ作成する。
自分はなかったので作成した（多分）

svg画像はフリー画像を適当に探して、これ を使った。
一応参考に画像を載せておく。

pubspeck.ymlを修正

これを忘れるとSVG画像をコードから認識できない。

pubspeck.yml

flutter:
  assets:
   - assets/ # <- これでassets直下を一気に追加できる、個別指定の必要なし

この作業は忘れがちなので注意！

flutter_svg パッケージを使用して画面表示する

pubspeck.yml に flutter_svg を追加する。

pubspeck.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^0.15.0 # <-追加

パッケージのバージョンはサイトで確認して最新版を調べること
https://pub.dev/packages/flutter_svg

あとはコードからSVGを表示することができる。

  SvgPicture.asset(
    'assets/commerce-and-shopping.svg',
    semanticsLabel: 'shopping',
    width: 50,
    height: 50,
  ),

widthとheightは指定しないとsvgが最大サイズで表示されるので注意

semanticsLabelはあってもなくてもよい。

SVGをIconButtonに使いたいとき

IconButton.icon に SvgPicture.asset()を使うことができる。
これにより円形のリップルエフェクトも適用され、ボタンとして使いやすくなる。

IconButton(
  // SvgPictureを指定できる
  icon: SvgPicture.asset(
    'assets/commerce-and-shopping.svg',
    semanticsLabel: 'shopping',
    width: 50,
    height: 50,
  ),
  onPressed: () {},
),

備考

他にも、ネットワーク越しにSVGを表示できたり、SVG画像のパスをコードで作成して表示したり、と色々なことができるので、公式サンプルを参考にするといい。
https://github.com/dnfield/flutter_svg/blob/master/example/lib/main.dart

使用したコード