Flutter How GridView invalid range error with Firebase - firebase

Question

I trying to create GridView which it returns Card Widget for FutureBuilder and I have 2 fields in Firebase.
GridView's itemCount: 6
But there is 2 field in Firebase. So, it return's me something like this:
How can I solve this ?
FutureBuilder code snipped:
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

Item depends on snapshot data length.
Replace
itemCount: 6,
with
itemCount: snapshot.data?.length,
It will provide exact data length that needs to build on GridView.
To create 6 items while handling null data
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,
);
}
Demo widget
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

You have to specify itemCount to the count of fields available in Firebase.
You have 2 fields in your Firebase database and you are giving a count 6.
Replace your itemCount with this:
itemCount: snapshot.data!.docs.length,