PCロール

PCロール

【Flutter】 SVGを表示する手順

【Flutter】 SVGを表示する手順
event

この記事は、Gajeroll Advent Calendar 2022の 23 日目の記事です。

今回は、Flutter による開発で、SVG 画像を表示する方法を紹介します。初心者でもわかりやすいように、手順通りに解説しています。

SVG ファイルをディレクトリにコピー

images ディレクトリを用意

まずは、画像などのアセットをまとめて置いておくためのディレクトリ（フォルダ）を用意しましょう。

場所は、アプリ開発を行なっているディレクトリの直下で、 android や ios 、 lib などのディレクトリと同じ階層です。

  • android
  • ios
  • lib
  • images

ディレクトリの名前は images 、 assets など、わかりやすい名前なら何でも OK です。ここでは、 images ディレクトリを作成した例を説明します。

SVG ファイルを images ディレクトリ内にコピー

先ほど作成したディレクトリ内に SVG ファイルをコピーしましょう。

  • android
  • ios
  • lib
  • images
    • example.svg

ここでは、 example.svg を表示する例を示します。

もし、svg、png などで分類したい場合は、 images 内にいくつかディレクトリを追加しても構いません。

画像のパスを追加

続いて、追加した画像のパスを pubspec.yaml に追加します。

pubspec.yaml をほとんど編集していない場合は、以下のような記述があると思います。

code
編集モード
# The following section is specific to Flutter packages.
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.

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/icon.png
  #   - images/icon_android.png

パスを追加する際は、コメントアウトされた部分のパスの書き方を真似して書けば OK です。この記事の例では、以下のようになります。

code
編集モード
# The following section is specific to Flutter packages.
flutter:
  assets:
    - images/example.svg

flutter_svg を追加

ここからが、SVG を表示させるときに、PNG などと異なる手順になります。まず、 flutter_svg というパッケージを追加しましょう。

ターミナルで次のコマンドを実行します。

code
編集モード
flutter pub add flutter_svg

SVG を表示

表示したいファイルで、 flutter_svg をインポートしましょう。

code
編集モード
import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset('images/example.svg'),

SvgPicture.asset(
  'images/example.svg',
  width: 24,
),

もっと詳しく

さらに詳しく知りたい方は、パッケージの仕様書などをご覧ください。

最後までご覧いただきありがとうございます。PC ロールでは、テクノロジーに関する情報をまとめて発信しています。また、ガジェロールでおすすめのガジェットについて幅広く紹介しています。ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。

← Back to home