Как предварительно загрузить Image.network

Question

Я получаю разные изображения из Firestore несколько раз и отображаю их на экране, но загружается немного медленно. Поэтому я хочу предварительно загрузить изображение, есть ли способ?

В частности, в следующем коде, когда counter == 0, я хочу прочитать imageURL, когда counter == 1, 2. (Flutterкэшируйте изображение, поэтому, когда счетчик достигнет 1 или 2, изображение будет загружаться быстрее.)

Я также пробовал CachedImageNetwork, но не знал, как его адаптировать к этому случаю

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {

  int counter=0;
  List imageURLList=['url1','url2','url3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.network(imageURLList[counter]),
            RaisedButton(
              onPressed: (){
                setState(() {
                  counter++;
                });
              },
              child: Text('push'),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Если я правильно понимаю, вы хотите загрузить сетевое изображение, даже если оно не отображается. РЕДАКТИРОВАТЬ после тестирования: Вместо использования списка URL, я бы использовал список, содержащий объект NetworkImage и метод precacheImage.

class _TestScreenState extends State<TestScreen> {
  int counter = 0;
  List<NetworkImage> imgList = [
    NetworkImage("url1"),
    NetworkImage("url2"),
    NetworkImage("url3"),
  ];

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    for (var img in imgList) {
      precacheImage(img, context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image(image: imgList[counter]),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}