Как загрузить изображение по одному в GridView от начала до конца с помощью Firebase

Question

Я работаю над небольшим проектом. У меня есть 25 изображений в Firebase, и я хочу, чтобы они загружались на мой экран одно за другим с самого начала. Все изображения, которых нет на экране, должны загружаться при их прокрутке. Но когда я пытаюсь загрузить изображения из Firebase, все изображения загружаются одновременно. из-за этого мое приложение вылетает при загрузке изображений. Я использовал Gridview.builder для загрузки изображения с двумя изображениями как CrossaxisCount.

Мой код

class CategoryGrid extends StatefulWidget {
  @override
  _CategoryGridState createState() => _CategoryGridState();
}

class _CategoryGridState extends State<CategoryGrid> {  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: StreamBuilder(
        stream: Firestore.instance.collection(label).snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container(
              child: Center(
                child: CircularProgressIndicator(
                  valueColor: new AlwaysStoppedAnimation<Color>(Colors.black54),
                ),
              ),
            );
          } else {
            return SingleChildScrollView(
              child: Container(
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 50.0,
                      margin: EdgeInsets.only(top: 45.0),
                      child: Text(
                        displayText,
                        style: GoogleFonts.poppins(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 25.0,
                        ),
                      ),
                    ),
                    GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: 0.6,
                        crossAxisSpacing: 12.0,
                        mainAxisSpacing:12.0,
                      ),
                      padding: EdgeInsets.all(15.0),
                      physics: ClampingScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (context, index) {
                        DocumentSnapshot imgUrl =
                            snapshot.data.documents[index];
                        if (imgUrl == null) {
                          return CircularProgressIndicator();
                        } else {
                          return GestureDetector(
                            onTap: () {
                              Navigator.push(context,
                                  MaterialPageRoute(builder: (context) {
                                return FullScreenPage(
                                    image: "${imgUrl['image']}");
                              }));
                            },
                            child: Container(
                              child: ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5.0)),
                                child: FadeInImage(
                                  image: NetworkImage(
                                    "${imgUrl['image']}",
                                  ),
                                  fit: BoxFit.fill,
                                  placeholder: AssetImage(
                                      'images/Loadinghorizontal.jpg'),
                                ),
                              ),
                            ),
                          );
                        }
                      },
                    ),
                  ],
                ),
              ),
            );
          }
        },
      ),
    );
  }
}