[Flutter]svgファイルを画面に表示する

「svgファイルってどうやって使うん？」「pngとかjpegなら分かるけどsvgはよう分からん」という方にお届けします。
SVGファイル形式とはScalable Vector Graphicsの略で、adobeの公式サイトにわかりやすい定義がありました。

webに適したベクターファイル形式です。JPEGなどのピクセルベースのラスターファイルに対し、ベクターファイルは、グリッド上の点と線にもとづいて数式を使用して画像を保存します。つまり、SVGなどのベクターファイルは、品質を損なわずにサイズを大幅に変更できるため、ロゴや複雑なオンライングラフィックに最適です。

https://www.adobe.com/jp/creativecloud/file-types/image/vector/svg-file.html

例えばボタンで使用するアイコンなど、小さいけれど鮮明に表示したいファイルの場合、SVGを使っても良さそうですね。

例：GoogleのMaterial Design 3で使われているボタン
https://m3.material.io/components/all-buttons

FlutterでSVGファイルを使う場合は、flutter_svgパッケージが手っ取り早いです。

flutter_svg | Flutter Package

pubspec.yamlに以下を追加して、flutter_svgパッケージを自分が開発しているflutterプロジェクトに導入。

/// pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.0.4

同じくpubspec.yamlのassetsに、自分が使用したいsvgファイルの名前を追加。今回は、「undraw_throw_away.svg」という名前のファイルを追加しようと思います。

/// pubspec.yaml
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - undraw_throw_away.svg 　　　//here

そして自分のFlutterプロジェクトにassetsというフォルダがあるので、そこに、「undraw_throw_away.svg」を追加します。

Macであれば、Finderから該当のファイルをドラッグアンドドロップしてくれば、
簡単に追加できます。

ちなみにこの画像ファイルはunDrawという、とてもオシャレな画像を無料で、かつ好きな色でダウンロードできるという優れたサイトです。開発の際にはよく使用させてもらってます。

Illustrations | unDraw

undraw_throw_away.svg
いい感じの画像がゲットできてしまう

今回、アプリ初回起動時に表示してアプリの概要を説明するIntroduction_pageに、画像を表示してみました

      PageViewModel(
        title: "Welcome",
        body: "You can do it!",
        image: Center(
          child: SvgPicture.asset(
            "assets/undraw_throw_away.svg",
            height: 175.0,
          ),
        ),
        decoration: const PageDecoration(
          titleTextStyle:
              TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
          bodyTextStyle: TextStyle(fontSize: 20.0),
          pageColor: Color.fromARGB(108, 146, 193, 209),
        ),
      ),

SggPicture.asset()の中に、上記で登録した画像のパスを"assets/undraw_throw_away.svg"のようにして登録し、画像の高さをheightで設定します。

          child: SvgPicture.asset(
            "assets/undraw_throw_away.svg",
            height: 175.0,
          ),

そうすると、svgファイルを画面に表示できました。