是否有可能破坏Flutter Grid视图的子级？

Question

我正在尝试从flutter firestore加载文档，其中每个文档都包含图像的网址以及其他一些数据。每个网址都指向Firebase存储中的图像。 问题是，当我在Flutter的网格视图中加载图像时，滚动会变得缓慢。当时大约只有20张图像。这是我的代码：

根据listview的文档，当孩子离开视线时，它会被销毁，然后在进入视线时被重建。是否可以在gridview中实现类似的功能？

import 'dart:async';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class WallpaperScreen extends StatefulWidget {
  @override
  _WallpaperScreenState createState() => _WallpaperScreenState();
}

class _WallpaperScreenState extends State<WallpaperScreen> {

  int totalWallpapers;
  StreamSubscription <QuerySnapshot> subscription;
  List<DocumentSnapshot> wallpapersList;
  NetworkImage networkImage;
  final CollectionReference collectionReference = Firestore.instance.collection(
      'wallpapers');

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        wallpapersList = datasnapshot.documents;
        totalWallpapers = wallpapersList.length;
        if (wallpapersList[1].data['url'] != null) {
          networkImage = NetworkImage(wallpapersList[1].data['url']);
        }
      });
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Color(0xff5e62),
            expandedHeight: 200,
            elevation: 8.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
                      child: Image.asset('assets/icon.png', height: 30, width: 80, fit: BoxFit.cover),
                    ),
                    Container(
                      padding: EdgeInsets.fromLTRB(0, 0, 0, 1),
                      child: Text(
                        'Querencia',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.w100,
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.fromLTRB(0, 8, 0, 0),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.filter,
                            size: 10,
                            color: Colors.white,
                          ),
                          Text(
                            ' $totalWallpapers wallpapers',
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w100,
                              fontSize: 10,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              background: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: networkImage, fit: BoxFit.cover,
                  ),
                ),
                child: new BackdropFilter(
                  filter: new ImageFilter.blur(sigmaX: 9.0, sigmaY: 8.0),
                  child: new Container(
                    decoration: new BoxDecoration(color: Colors.white.withOpacity(0.2)),
                  ),
                ),
              ),
            ),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 0,
              crossAxisSpacing: 0,
            ),
            delegate: SliverChildBuilderDelegate((BuildContext context, int i) {
                String imgUrl = wallpapersList[i].data['url'];
                String imgID = wallpapersList[i].data['id'];
                String thumbnail = wallpapersList[i].data['thumbnail'];
                return Material(
                  elevation: 0,
                  child: InkWell(
                    child: Hero(
                      tag: imgID,
                      child: FadeInImage(
                        placeholder: AssetImage('assets/loader.png'),
                        image: NetworkImage(thumbnail),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                );
            },
            childCount: totalWallpapers,
            ),
          ),
        ],
      ),
    );
  }
}