Flutterでローカルイメージアセットを事前にロード

Question

私はイメージアセットの単純なリストを持っており、画面上には1つのイメージウィジェットがあります。私はsetState（）を使用して、ボタンを使用して循環させます。

const List<String> _photoData = const [ 
    "assets/generic-cover.jpg", 
    "assets/generic-cover2.jpg", 
    "assets/generic-cover3.jpg", 
    "assets/generic-cover4.jpg", 
]; 

class _MyHomePageState extends State<MyHomePage> { 

    int _coverPhoto = 0; 

    void _switchCoverPhoto() { 
    setState(() { 
     _coverPhoto++; 
     if (_coverPhoto == _photoData.length) { 
     _coverPhoto = 0; 
     } 
    }); 
    } 

    @override 
    Widget build(BuildContext context) { 

    return new Scaffold(
     body: new Stack(
     children: <Widget>[ 
      new Image.asset (
      _photoData[_coverPhoto], 
      fit: ImageFit.cover, 
      height: 600.0, 
     ), 
      new Positioned (// photo toggle button 
      child: new IconButton(
       icon: new Icon (Icons.photo), 
       onPressed: _switchCoverPhoto, 
       color: Colors.white, 
      ), 
      top: 32.0, 
      right: 32.0, 
     ), 
     ] 
    ) 
    ); 
    } 

最初の画像がうまく表示されます。しかし、_switchCoverPhoto（）を呼び出すと、「assets/generic-cover2.jpg」が表示される前に白い点滅が表示されます。

これは単純な質問につながります：次の画像（または画像）をメモリにプリロードする簡単な方法はありますか？あらかじめフラッシュはありませんか？

See attached GIF for a loose approximation.

Answer 1

あなたのイメージのためにtrueへgaplessPlaybackセットを持っていることを確認してください。

これでプリロードの問題は解決しませんが、アセットを切り替えるときに画像が白く点滅することはありません。

gaplessPlaybackをtrueに設定すると、元の画像は、新しい画像の読み込みが完了し、「白いフラッシュギャップ」が存在しなくなるまで残ります。

var img = new Image.asset(
    _photoData[_coverPhoto], 
    fit: ImageFit.cover, 
    height: 600.0, 
    gaplessPlayback: true, 
);