GridView.builder creates page that scrolls endlessly

Question

Trying to use an API to build the grid. Everything renders fine but after the last row of tiles the page goes blank & just keeps scrolling & scrolling &... the grid is built like so:

body: new GridView.builder(       gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),       itemBuilder: (BuildContext context, int index) {         return new Card(           child: new GridTile(             footer: new Text(data[index]['name']),               child: new Text(data[index]['image']), //just for testing, will fill with image later           ),         );       },   ) 

The exception as I continually scroll further down the blank page with the last number (inclusive: 24) getting larger by multiples of 2 (24,26,28,etc).

I/flutter (11001): Another exception was thrown: RangeError (index): Invalid value: Not in range 0..23, inclusive: 24 

Anyone seen this behavior with GridView.builder?

Answer 1

You can pass the item count to the builder.

Example:

body: GridView.builder(   itemCount: data.length,   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(       crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),   itemBuilder: (BuildContext context, int index) {     return new Card(       child: new GridTile(         footer: new Text(data[index]['name']),         child: new Text(data[index]             ['image']), //just for testing, will fill with image later       ),     );   }, ), 

Where final orientation = MediaQuery.of(context).orientation;

Hope that helped!