【flutter攻略】なんでSVGだけ画像出力できないの？

起きている問題

pngは出力できるけどsvgの画像が出力できない、、

ファイル構造

• Assets/
  • Images/
    • sample2.svg
  • Fonts/
    • sample.ttf

通常の画像出力例

sample.dart

Image.asset('assets/images/sample1.svg')

pngできるけどsvgだと画像出力できなくね？と思った方。
Svgの画像出力には、専用のpackageが必要です。

flutter_svg

まずは必要なpackageをyamlファイルに記述していきましょう。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^1.1.5

該当部分はflutter_svg: ^1.1.5の箇所です。
yamlファイルはインデントが重要なので、指定されている階層に貼り付けましょう。
flutter_svgのバージョンですが、こちらから確認していただき、最新バージョンを指定すると良いでしょう。

次は実際にコードを書いて、出力してみましょう。
先ほどyamlファイルに記述したpackageのimportを行います。

sample.dart

import 'package:flutter_svg/svg.dart’

widget内

sample.dart

SizedBox(
  width: 300,
  child: SvgPicture.asset(
      'assets/images/sample2.svg'),
),

packageをimportすると、SvgPictureが使用可能になるので、そちらを使い出力を行います。

しっかりsvgが出力できましたね。なんかsvgっぽくなくて違和感ありますが、出力はできているので一件落着としましょう。