Vorladen von lokalen Bild Assets in Flutter

Question

Ich habe eine einfache Liste von Bild Assets, und ich habe ein Bild Widget auf dem Bildschirm. Ich benutze eine Taste, um durch sie zu gehen, mit 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, 
     ), 
     ] 
    ) 
    ); 
    } 

Das erste Bild ist in Ordnung. Allerdings, wenn ich _switchCoverPhoto() aufrufen, gibt es einen kurzen weißen Blitz bevor "Assets/generic-cover2.jpg" angezeigt wird.

Was zu einer einfachen Frage führt: Gibt es eine einfache Möglichkeit, ein nachfolgendes Bild (oder Bilder) in den Speicher zu laden, so dass es vorher keinen Blitz gibt?

See attached GIF for a loose approximation.

Answer 1

Stellen Sie sicher, gaplessPlayback Set true für Ihr Bild haben.

Dies löst zwar nicht das Problem des Vorladens, verhindert jedoch, dass das Bild beim Umschalten der Assets weiß blinkt.

Wenn gallessPlayback auf true gesetzt ist, bleibt Ihr Originalbild erhalten, bis das neue Bild vollständig geladen ist und keine "weiße Blitzlücke" mehr vorhanden ist.

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