【flutter】Container のbackgroundにSVG画像を設定したい

Question

前提・実現したいこと

以下のようなコードで、Containerの背景にSVG画像を表示させたいです。

           Container(
              decoration: new BoxDecoration(
                image: DecorationImage(
                    image: SvgPicture.asset('assets/walk_bg_rect.svg'),
                ),
              ),
            ),

発生している問題・エラーメッセージ

Compiler message:
lib/screens/walk_screen.dart:21:39: Error: The argument type 'SvgPicture' can't be assigned to the parameter type 'ImageProvider<dynamic>'.

補足情報（FW/ツールのバージョンなど）

以下の記事と同じ事象だと思いますが、、よくわからず、、
https://github.com/dnfield/flutter_svg/issues/152

Answer 1

https://stackoverflow.com/questions/58350389/flutter-converting-rawimage-to-something-that-extends-imageprovider

こちらも参考にして、以下のようにしてみました。

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/services.dart' show rootBundle;
----
  FutureBuilder<MemoryImage>(
    future: (() async {
      final rawSvg = await rootBundle.loadString('assets/walk_bg_rect.svg');
      final svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
      final picture = svgRoot.toPicture();
      final image = await picture.toImage(width, height); // 適切な値を指定する
      final byteData = await image.toByteData(format: ImageByteFormat.png);
      return MemoryImage(byteData.buffer.asUint8List());
    })(),
    builder: (context, snapshot) {
      return snapshot.hasData
          ? Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: snapshot.data,
                ),
              ),
              child: ~~,
            )
          : Container();
    },
  ),

Comments

[Tetsukick]

ありがとうございます！