FlutterでSVG画像を簡単に使う「svg_provider」

FlutterでSVG画像を表示する方法はいくつかありますが、svg_providerパッケージを使えば、SVGファイルをImageウィジェットで簡単に扱えるようになります。

ここでは、svg_providerの基本的な使い方と、コード例を紹介します。

---

1. svg_providerとは

通常、FlutterでSVG画像を表示するにはflutter_svgパッケージを使う必要がありますが、これはSvgPictureウィジェット専用です。

一方で、svg_providerを使えば、ImageウィジェットやBoxDecorationなどImageProviderを必要とする場面でSVG画像が使えるようになります。

---

2. インストール方法

pubspec.yaml に以下を追加します。

dependencies:
  svg_provider: ^1.0.3  # バージョンは pub.dev で最新を確認してください

その後、以下を実行します。

flutter pub get

また、SVGをパースするために、flutter_svgパッケージも内部的に使われます。

---

3. 使い方（ローカルSVGの表示）

以下は、assets/sample.svgというSVGファイルを表示する例です。

assetsの設定

pubspec.yaml にアセットを追加します。

flutter:
  assets:
    - assets/sample.svg

表示コード

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SvgProviderExample(),
    );
  }
}

class SvgProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SVG Provider Example')),
      body: Center(
        child: Image(
          image: Svg('assets/sample.svg'),
          width: 150,
          height: 150,
        ),
      ),
    );
  }
}

---

4. 応用例：BoxDecorationにSVGを使う

ImageProviderとして扱えるため、背景画像としてSVGを設定することも可能です。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Svg('assets/sample.svg'),
      fit: BoxFit.cover,
    ),
  ),
);

---

5. 注意点

• SVGの内容によっては、flutter_svgがサポートしていない機能により表示できないことがあります（フィルター、アニメーションなど）。
• ネットワーク経由のSVGは直接扱えないため、対応したい場合は別パッケージ（例：flutter_svgのSvgPicture.network）を使うのが良いです。

---

まとめ

svg_providerを使えば、ImageウィジェットやBoxDecorationでSVG画像を簡単に使うことができます。flutter_svgと組み合わせて使えば、アプリ内のSVG表示の柔軟性が大きく広がります。

SVGをより汎用的に使いたい方は、ぜひ導入してみてください。

---

関連リンク

• svg_provider – pub.dev
• flutter_svg – pub.dev

---