プレースホルダイメージを非同期イメージで更新するにはどうすればよいですか？

Question

私は、キャッシュから画像を取り出すか、ネットワーク要求をするためにマネージャークラスを使用しています。私はプレースホルダ画像を使用しています。適切なイメージが取得されたときにそのプレースホルダイメージを置き換える最善の方法は何ですか？

final ItemManager _manager; 
final Item _item; 
var _itemImage = 
    new Image.asset('assets/images/icons/ic_placeholder.png'); 

@override 
Widget build(BuildContext context) { 
    _loadImage(); 
    return new Container(
    child: _itemImage, 
); 
} 

_loadImage() async { 
    var file = await _manager.itemImageForImageUrl(_item.imageUrl); 
    _stickerImage = new Image.file(file); 
} 

Answer 1

FutureBuilderクラスは、このような場合に設計されています。私は_loadImageを変更して、メンバ変数を設定する代わりにイメージを返すようにしました。そして、あなたはinitStateを取り除くと、次のようにあなたのbuild()方法を変更することができますよう

@override 
Widget build(BuildContext context) { 
    return new FutureBuilder(
    future: _loadImage(), 
    builder: (BuildContext context, AsyncSnapshot<Image> image) { 
     if (image.hasData) { 
     return image.data; // image is ready 
     } else { 
     return new Container(); // placeholder 
     } 
    }, 
); 
} 

をさておき、あなたはsetStateを呼び出すことなく、あなたのStateのメンバ変数を変異させるべきではありません。あなたのビルド関数は呼び出されず、これは最終的に（私たちが実装するとすぐに）リンターが苦情を申し立てるものです。しかし、FutureBuilderは、画像の読み込みが完了するまでに州が処分された場合に何が起こるか心配する必要がないため、ユースケースにはるかに適しています。