【Flutter】SVG画像を表示する｜flutter_svgパッケージの使い方

2023年10月23日

この記事はこんな人におすすめ！

FlutterでSVG画像を表示したい
flutter_svgパッケージの導入手順が知りたい
SvgPictureウィジェットの基本的な使い方が知りたい

「FlutterでSVG画像を表示するにはどうするの？」

今回はFlutterでオンラインまたはオフラインのSVG画像を表示できるSvgPictureウィジェットの使い方について解説していきます。

本記事の流れとしては「外部パッケージの導入」、「オフライン画像の保存」、「SVG画像の表示方法」の順で解説していくのでぜひ最後までご覧ください。

外部パッケージの導入｜flutter_svgのインストール

手順

pubspec.yamlファイルを編集
dartファイルにコードを追加

まずはSvgPictureを使用する際に必要となるflutter_svgパッケージをインストールしていきます。

» 外部パッケージの導入方法はこちら

pubspec.yamlファイルを編集

Flutterプロジェクトをテキストエディタ（VSCode, Android Studioなど）で開いたら、ターミナルで次のコマンドを実行します。

flutter pub add flutter_svg

コマンドを実行するとpubspec.yamlファイルに次のようなコードが自動で追加されます。（手動でコピペする場合はflutter pub getを忘れないようにしましょう）

dependencies:
  flutter_svg: ^2.0.7

dartファイルにコードを追加

pubspec.yamlファイルの準備ができたら、dartファイルに次のコードを追加します。

import 'package:flutter_svg/flutter_svg.dart';

»　外部パッケージを追加・インストールできない時の対処法

SVG画像の保存

手順

プロジェクト直下にimagesフォルダを作成・画像の保存
pubspec.yamlファイルを編集

オフラインのSVG画像を表示したい方は先に画像を保存する作業を行なっておきましょう。

プロジェクト直下にimagesフォルダを作成

Flutterプロジェクト直下にimagesフォルダを作成し画像を保存します。

今回はimagesフォルダにBird.svgを保存してアプリで表示させていきます。

pubspec.yamlファイルを編集

pubspec.yamlファイルを開き次の箇所にコードを追加します。

- images/とすることでimagesフォルダの全てのファイルにアクセスできるようになります。

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:
  #↓の2行のコードを追加
  assets: 
    - images/

オフラインのSVG画像を表示する方法

先ほどimagesフォルダで保存したSVG画像を表示するにはSvgPicture.assetに画像のパスを渡します。

画像の大きさはheightまたはwidthで指定できます。

SvgPicture.asset(
  'images/Bird.svg',
  width: 250,
)

オンラインのSVG画像を表示する方法

オンラインのSVG画像を表示するにはSvgPicture.networkに画像のパスを渡します。

画像の大きさはheightまたはwidthで指定できます。

SvgPicture.network(
  'https://svgrepo.com/show/530622/milk-tea.svg',
  width: 250,
)

サンプルコード

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: SvgPicture.network(
            'https://svgrepo.com/show/530622/milk-tea.svg',
            width: 250,
          ),
        ),
      ),
    );
  }
}