この記事は、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 をほとんど編集していない場合は、以下のような記述があると思います。
# 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です。
この記事の例では、以下のようになります。
# The following section is specific to Flutter packages.
flutter:
assets:
- images/example.svgここまでは、どの画像でも同じ手順です。
flutter_svgを追加
ここからが、SVGを表示させるときに、PNGなどと異なる手順になります。
まず、 flutter_svg というパッケージを追加しましょう。
ターミナルで次のコマンドを実行します。
flutter pub add flutter_svgこれでパッケージが追加されました。
SVGを表示
表示したいファイルで、 flutter_svg をインポートしましょう。
import 'package:flutter_svg/flutter_svg.dart';続いて、以下の例のように、 SvgPicture.asset でSVGを表示させます。
SvgPicture.asset('images/example.svg'),ここで指定するパスは、 pubspec.yaml に書いたものと同じです。
SvgPicture.asset(
'images/example.svg',
width: 24,
),上のように、 width や height などを指定することもできます。
もっと詳しく
さらに詳しく知りたい方は、パッケージの仕様書などをご覧ください。
最後までご覧いただきありがとうございます。
PCロールでは、テクノロジーに関する情報をまとめて発信しています。
また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。
ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。
コメント