- 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.7dartファイルにコードを追加
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,
),
),
),
);
}
}まとめ
今回はSvgPictureでSVG画像を表示する方法を解説していきました。
Flutterには他にもPNGやJPEG画像を表示できるImageがあるのでぜひ一緒にご覧ください。