Предварительная загрузка локальных изображений в Flutter

Question

У меня есть простой список объектов изображения, и у меня есть один виджет изображения на экране. Я использую кнопку для циклического перехода через них, используя 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(), перед «активами/generic-cover2.jpg» появляется красная белая вспышка.

Это приводит к простому вопросу: есть ли простой способ предварительно загрузить последующее изображение (или изображения) в память, чтобы не было предварительной вспышки?

See attached GIF for a loose approximation.

Answer 1

Убедитесь, что вы gaplessPlayback набор для true для вашего изображения.

Это не решит проблему предварительной загрузки, но при переключении активов изображение будет мерцать до белого.

С зазором, установленным в true, ваше исходное изображение останется до тех пор, пока новое изображение не завершит загрузку и не появится «белая вспышка».

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