Search code examples
flutterflutter-layoutstaggered-gridview

How to fix RangeError when using QuiltedGridDelegate


I am trying to add flutter_staggered_grid_view that I found on pub.dev to my app. I've tried changing around the code from the example, but I keep getting this error:

RangeError (index): Invalid value: Not in inclusive range 0..5: 7

I'm not sure if the documentation is out of date, or if I'm missing something obvious. Why am I getting this error and how can I fix it?

Code:

@override
Widget build(BuildContext context) {
  final data = ["Sally", "Bob", "Jane", "Jordan"];

  return GridView.custom(
    gridDelegate: SliverQuiltedGridDelegate(
      crossAxisCount: 4,
      crossAxisSpacing: 4,
      mainAxisSpacing: 6,
      repeatPattern: QuiltedGridRepeatPattern.same,
      pattern: [
        const QuiltedGridTile(1,1),
        const QuiltedGridTile(2,1),
        const QuiltedGridTile(1,1),
        const QuiltedGridTile(2,1),
      ]
    ),
    childrenDelegate: SliverChildBuilderDelegate (
      (context, index) => GridTile(
        child: Container (
          padding: const EdgeInsets.all(1),
          child: Text(data[index]),
        ),
      ),
      childCount: data.length,
    ),
  );
}

Solution

  • I actually found the real answer. My problem was that I was not matching the crossAxisCount with the number of columns I wanted. Updating the cross axis count to 6 worked for me.