Preloading Local Images in Flutter

Question

I have a simple list of image objects, and I have one image widget on the screen. I use a button to iterate over them using 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, ), ] ) ); } 

The first image displays a penalty. However, when I call _switchCoverPhoto (), a red white flash appears there before displaying "assets / generic-cover2.jpg".

This leads to a simple question: is there a simple way to preload the subsequent image (or images) into memory so that there is no pre-flash?

See attached GIF for a closer look.

Answer 1

Make sure your image is set to gaplessPlayback true .

This will not solve the preload problem, but when switching assets, the image will flicker to white.

If the gaplessPlayback parameter is set to true, your original image will remain until the new image finishes loading and there is no “white flash” present.

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