FlutterでのSVGの使い方とエラー対策
そもそもSVGファイルとは？
SVG = Scalable Vector Graphicsのこと
簡単に言えば画像をベクトル形式で保存しており、拡大や縮小などでも劣化しにくい画像保存形式でロゴとかに使われる
デザインのサイトでもSVGファイルのダウンロードをすることが多くて、FlutterでもSVGファイルを扱えないか調べてみた。
unDrawというめっちゃいい感じのデザインサイトでもSVGファイルで画像を保存できる
Flutter_svgというpackageを使えば良さそう
ドキュメントを読めることができるなら上のパッケージの説明文を読んでいただければ十分だと思います！
パッケージのインストー
ルの方法は通常と同様にpubspec.yaml file に
dependencies:
flutter_svg: ^0.19.2+1
を追加したのち（バージョンは最新版を参照してください）
$ flutter pub get
でインストールする。
その後使いたいDartfileに
import 'package:flutter_svg/flutter_svg.dart';
パッケージをimportして使えるように！
ここで注意するのがflutter_svgの最新バージョンだとAndroidのsdkの古いバージョンに対応していない場合がありsdkのバージョンエラーが発生する。
例えば下の感じ
Because sampleapp depends on flutter_svg >=0.19.2 which requires Flutter SDK version >=1.24.0-6.0.pre, version solving failed.
pub get failed (1; Because sampleapp depends on flutter_svg >=0.19.2 which requires Flutter SDK version >=1.24.0-6.0.pre, version solving failed.)
このような場合はFlutterSDKのバージョンをアップすれば良い、がただFlutter upgradeをターミナルに打ち込んでもうまくいかないことが
この時はFlutter channelsを変更してアップグレードするか、flutter_svgのバージョンを少し古いのにして対応する。
基本的には古いversionを使うのがおすすめ
下のURLにバージョン一覧があるからちょっと前のやつを選ぶと使えるようになる
あとはassetsというフォルダを作成し、そこに画像を入れpubspeck.ymlも更新する（これは普通のimgaを追加する時と同じ
flutter:
assets:
- assets/
assetsに追加した直後はattribute data-name is not allowed hereというエラーが生じる場合がある。このような時はFile -> Invalidate Cache / RestartでAndroid Studioを更新するとエラーがなくなる。
ここまできたら実際にアプリを作るときにコードを書いていけばいける！
final String assetName = 'assets/image_that_does_not_exist.svg';
final Widget svg = SvgPicture.asset(
assetName,
);
こんな感じで普通のimageと同じような感じで扱えるようになる
参考文献
Discussion