PCロール

PCロール

【Flutter】SVGを表示する手順

【Flutter】SVGを表示する手順

この記事は、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('images/example.svg'),

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

もっと詳しく

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

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

← Back to home