FlutterでSVGを利用する(flutter_svg)

FlutterでSVGを利用したいなと思ったので、その時調べた備忘録。
flutter_svgパッケージを使うといいらしい。

画像ファイルを配置するフォルダの作成

まずは、ディレクトリを作成する。

$ mkdir -p assets/images/

assets/images/に表示したいsvgファイルを配置しておく。

pubspec.yamlの設定

# ./pubspec.yaml
dependencies:
  # ...略
  # flutter_svgを追加
  flutter_svg: ^0.19.0

flutter:
  # 画像ファイルを配置しているフォルダを指定
  assets:
    - assets/images/

flutter packages getで変更を反映しておく

flutter_svgで画像の表示

あとはSvgPictureウィジェットを使えばOK

SvgPicture.asset(
  "assets/images/neko.svg",
  color: Color(0xff93D2D9),
  height: 80,
),

画像のパスや色、高さなどを指定できる。

ネットワーク上の画像にも対応していて、SvgPicture.networkを使えばよいらしい。
以下は公式ドキュメントのサンプル。placeholderも指定されてる。

// Will print error messages to the console.
final String assetName = 'assets/image_that_does_not_exist.svg';
final Widget svg = SvgPicture.asset(
  assetName,
);

final Widget networkSvg = SvgPicture.network(
  'https://site-that-takes-a-while.com/image.svg',
  semanticsLabel: 'A shark?!',
  placeholderBuilder: (BuildContext context) => Container(
      padding: const EdgeInsets.all(30.0),
      child: const CircularProgressIndicator()),
);

以上!!

参考にしたサイト様

• flutter_svg | Flutter Package
• FlutterでSVG画像を表示する - Qiita