CODEWITHSUNDEEP
flutterflutter-layoutstaggered-gridview
JJ_
JJ_

Reputation: 31

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,
    ),
  );
}

Upvotes: 0

Views: 218

Answers (2)

JJ_
JJ_

Reputation: 31

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.

Upvotes: 0

Nayemuzzaman
Nayemuzzaman

Reputation: 499

I don’t know how’s your design but your pattern define not properly

You may test that one

 @override
  Widget build(BuildContext context) {
    final data = ["Sally", "Bob", "Jane", "Jordan"];
    return Directionality(
      textDirection: TextDirection.ltr,
      child: GridView.custom(
        gridDelegate: SliverQuiltedGridDelegate(
            crossAxisCount: 4,
            crossAxisSpacing: 4,
            mainAxisSpacing: 6,
            repeatPattern: QuiltedGridRepeatPattern.same,
            pattern: [
              const QuiltedGridTile(1, 2),
              const QuiltedGridTile(1, 2),
              const QuiltedGridTile(1, 2),
              const QuiltedGridTile(1, 2),
            ]),
        childrenDelegate: SliverChildBuilderDelegate(
          (context, index) => GridTile(
            child: Container(
              padding: const EdgeInsets.all(1),
              child: Text(data[index]),
            ),
          ),
          childCount: data.length,
        ),
      ),
    );
  }

Upvotes: 2

Related Questions