質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

解決済

1回答

110閲覧

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

akirayoshimura

総合スコア50

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2024/09/11 08:11

実現したいこと

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に要素として取り込んでおけるのか?または複数ページからアクセスできるのか?など調べてもわかりませんでした。

補足

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

dart

1class ImageDb { 2 ImageDb(String src) : image = NetworkImage(src); 3 final NetworkImage image; 4} 5 6class ImageProvider extends StatelessWidget { 7 const ImageProvider({super.key}); 8 9 10 Widget build(BuildContext context) { 11 return Provider<ImageDb>( 12 create: (_) => ImageDb( 13 "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg"), 14 child: const Scaf(), 15 ); 16 } 17} 18 19class ImageBase extends StatelessWidget { 20 const ImageBase({super.key}); 21 22 23 Widget build(BuildContext context) { 24 final data = context.read<ImageDb>(); 25 return Image(image: data.image); 26 } 27} 28 29class Scaf extends StatelessWidget { 30 const Scaf({super.key}); 31 32 33 Widget build(BuildContext context) { 34 return const Scaffold( 35 body: SingleChildScrollView( 36 child: Column( 37 children: [ 38 ImageBase(), 39 SizedBox(height: 10), 40 ImageBase(), 41 ], 42 ), 43 ), 44 ); 45 } 46}

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

投稿2024/09/12 09:50

ta.fu

総合スコア1718

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akirayoshimura

2024/09/17 06:59

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問