[flutter]providerでimage.networkを使用する方法

Question

実現したいこと

image.networkでの画像表示をproviderに置き換えたい。

発生している問題・分からないこと

現状複数のページで同じネットワーク画像を表示しています。しかしproviderを導入したのでimage.networkで表示していた画像もstatelessで表示できるようにしたいと考えています。
しかし実装方法を調べても答えらしきものを得ることが出来ず困っています。
お教えいただけると幸いです。

該当のソースコード

現状のコード（statefulで実装)
SizedBox(width : xx, child : Image(image.network(url))

実装したいコードの一例（statelessで実装）
final store = Provider.of<UserData>(context);
final _url = store.url;
image.assets(_url)

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

FutureProviderでの非同期実装
これでの解決をするのが一般的かもしれませんが出来れば普通のProviderで実装したいです。

CachedNetworkImageでの実装
非常に高速なのはわかっているのですが、非同期で接続できるのか？Providerに要素として取り込んでおけるのか？または複数ページからアクセスできるのか？など調べてもわかりませんでした。

補足

よろしくお願いいたします。

Answer 1

Provider側クラスで管理するのをNetworkImage(ImageProvider派生)にして、それをImageに渡す感じにしたらどうか。
CachedNetworkImageパッケージを使いたいのであれば、NetworkImageの代わりにCachedNetworkImageProviderを使うとか。

class ImageDb {
  ImageDb(String src) : image = NetworkImage(src);
  final NetworkImage image;
}

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

  @override
  Widget build(BuildContext context) {
    return Provider<ImageDb>(
      create: (_) => ImageDb(
          "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg"),
      child: const Scaf(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final data = context.read<ImageDb>();
    return Image(image: data.image);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body:  SingleChildScrollView(
        child: Column(
          children: [
            ImageBase(),
            SizedBox(height: 10),
            ImageBase(),
          ],
        ),
      ),
    );
  }
}

質問にstatelessと入ってるけど、これは質問をわかりづらくする文章かな。
もともと、Image自体、親がStatelessでもStatefulでも配置は可能。あくまでStateless・Statefulはextendしたクラスがどういったものをかを表すだけで、Imageとは関係ない物。
今回のケースでいうと、イメージURLが固定なのであれば、親がStatelessでも問題ない。

Comments

[akirayoshimura]

回答いただきありがとうございます！
そもそもstatelessに関する認識が間違っていました。またnetworkimageに関しても教えていただきありがとうございます！
大変勉強になりました。