Flutter 如何使用 Firebase 处理 GridView 无效范围错误

Question

我正在尝试为 FutureBuilder 创建 GridView returns Card Widget 并且我在 Firebase 中有 2 个字段。

GridView 的 itemCount: 6

但是 Firebase 中有 2 个字段。所以，我 return 是这样的：

我该如何解决这个问题？

FutureBuilder 代码被截断：

FutureBuilder(
                future: collectionRef.get(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.hasData && snapshot.data != null) {
                    if (snapshot.data!.docs.isNotEmpty) {
                      return GridView.builder(
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                        ),
                        physics: const BouncingScrollPhysics(),
                        itemCount: 6,
                        itemBuilder: (BuildContext context, int index) {
                          Map<String, dynamic> docData =
                              snapshot.data!.docs[index].data();
                          if (docData.isEmpty) {
                            return const Text("empty");
                          }
                          String timeSlot = docData['timeSlot'];

                          return Card();
                        },
                      );
                    } else {
                      return const Text("error");
                    }
                  } else {
                    return CircularProgressIndicator();
                    // const LoadingWidget1(height: 50);
                  }
                },
              ),

Answer 1

项目取决于 snapshot 数据长度。

替换

itemCount: 6,

和

itemCount: snapshot.data?.length,

它将提供需要构建在 GridView 上的确切数据长度。

在处理空数据时创建 6 个项目

itemCount: 6,
  itemBuilder: (c, index) {
    if (index < snapshot.data!.length) {
      //perform any index operation here
      return Card(
        color: Colors.grey,
      );
    } else {
      // you cant perform because data doesnt exit on this index
      /// Map<String, dynamic> docData =
      // snapshot.data!.docs[index].data();
      return const Card(
        color: Colors.yellow,
      );
    }

演示小部件

body: FutureBuilder<List<int>>(
    future: Future.delayed(Duration(seconds: 3))
        .then((value) => List.generate(02, (i) => i)),
    builder: (c, snapshot) {
      if (snapshot.hasData &&
          snapshot.connectionState == ConnectionState.done) {
        return GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          itemCount: 6,
          itemBuilder: (c, index) => index < snapshot.data!.length
              ? Container(
                  color: Colors.green,
                  child: Text(
                    "${snapshot.data![index]}",
                  ),
                )
              : Container(
                  color: Colors.red,
                  child: Text("Empty Box"),
                ),
        );
      }

      /// handle others snapshot-state 
      return CircularProgressIndicator();
    },
  ),

Answer 2

您必须指定 itemCount 到 Firebase 中可用的字段数。

您的 Firebase 数据库中有 2 个字段，并且计数为 6。

将您的 itemCount 替换为：

itemCount: snapshot.data!.docs.length,

Flutter 如何使用 Firebase 处理 GridView 无效范围错误

Flutter How GridView invalid range error with Firebase

gridview

firebase

flutter