🐙

FlutterでのSVGの使い方とエラー対策

2 min read

そもそもSVGファイルとは?

SVG = Scalable Vector Graphicsのこと
簡単に言えば画像をベクトル形式で保存しており、拡大や縮小などでも劣化しにくい画像保存形式でロゴとかに使われる

デザインのサイトでもSVGファイルのダウンロードをすることが多くて、FlutterでもSVGファイルを扱えないか調べてみた。
unDrawというめっちゃいい感じのデザインサイトでもSVGファイルで画像を保存できる

https://undraw.co/illustrations

Flutter_svgというpackageを使えば良さそう

https://pub.dev/packages/flutter_svg

ドキュメントを読めることができるなら上のパッケージの説明文を読んでいただければ十分だと思います!
パッケージのインストー
ルの方法は通常と同様に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にバージョン一覧があるからちょっと前のやつを選ぶと使えるようになる

https://pub.dev/packages/flutter_svg/versions

あとは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と同じような感じで扱えるようになる

参考文献

https://pub.dev/packages/flutter_svg

https://qiita.com/ikemura23/items/5671bba76136d940b618

https://ferret-plus.com/8445

https://qiita.com/unsoluble_sugar/items/5356646b1a7d9b9fecd2

https://www.quora.com/How-do-I-solve-the-following-error-attribute-is-not-allowed-here-in-Android-Studio

Discussion

ログインするとコメントできます