【Flutter】flutter_svgでSVGをWidget化

flutter_svgとは

flutter_svgパッケージは、FlutterアプリケーションでSVG（Scalable Vector Graphics）ファイルを描画するためのライブラリです。このパッケージを使用することで、SVGファイルをウィジェットとして簡単に表示することができます。また、画像のカラーやサイズを柔軟に変更することも可能です。

flutter_svg | Flutter package

An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files...

pub.dev

使い方

インストール

pubspec.yamlファイルに以下の依存関係を追加します。

dependencies:
  flutter_svg: ^2.0.10+1

基本的な使用法

アセットからSVGをレンダリング

アセットフォルダにSVGファイルを追加し、以下のコードで表示します。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SVG Example'),
        ),
        body: Center(
          child: SvgPicture.asset(
            'assets/image.svg',
            semanticsLabel: 'Acme Logo',
          ),
        ),
      ),
    );
  }
}

カラーフィルタを使用して色を変更

SVG画像の色を変更するには、colorFilterパラメータを使用します。

SvgPicture.asset(
  'assets/up_arrow.svg',
  colorFilter: ColorFilter.mode(
    Colors.red, 
    BlendMode.srcIn,
  ),
  semanticsLabel: 'A red up arrow',
)

プレースホルダーの設定

ネットワークからSVGをロードする場合、プレースホルダーを設定することができます。

SvgPicture.network(
  'https://example.com/image.svg',
  semanticsLabel: 'A shark?!',
  placeholderBuilder: (BuildContext context) => Container(
    padding: const EdgeInsets.all(30.0),
    child: const CircularProgressIndicator(),
  ),
)

生のSVGデータからレンダリング

生のSVGデータを使用して描画する例です。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SVG Example'),
        ),
        body: Center(
          child: FutureBuilder<ui.Image>(
            future: _loadSvg(),
            builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return RawImage(image: snapshot.data);
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }

  Future<ui.Image> _loadSvg() async {
    final String rawSvg = '''<svg ...>...</svg>''';
    final pictureInfo = await vg.loadPicture(SvgStringLoader(rawSvg), null);
    final image = await pictureInfo.picture.toImage(100, 100);
    pictureInfo.picture.dispose();
    return image;
  }
}

SVGの最適化とプリコンパイル

vector_graphicsバックエンドを使用してSVGを最適化し、バイナリ形式にコンパイルできます。

dart run vector_graphics_compiler -i assets/foo.svg -o assets/foo.svg.vec

生成された.svg.vecファイルを読み込むには、以下のようにします。

import 'package:flutter_svg/flutter_svg.dart';
import 'package:vector_graphics/vector_graphics.dart';

SvgPicture(
  const AssetBytesLoader('assets/foo.svg.vec')
)