I have a list of image assets, and I have one Image widget onscreen. I use a button to cycle through 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 renders fine. However, when I call _switchCoverPhoto(), there's a brief white flash before "assets/generic-cover2.jpg" gets shown.
Which leads to a simple question: Is there an easy way to preload a subsequent image (or images) into memory, so that there's no flash beforehand?
Make sure you have
gaplessPlayback
set totrue
for your image.This won't solve the preloading problem, but it will prevent the image from flashing to white when switching assets.
With gaplessPlayback set to true, your original image will remain until the new image has completed loading and no "white flash gap" will be present.