Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GridView.builder creates page that scrolls endlessly

Tags:

flutter

dart

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?

like image 359
JC23 Avatar asked Dec 14 '17 22:12

JC23


People also ask

How do I stop GridView scrolling in Flutter?

You can provide physics: NeverScrollableScrollPhysics() on GridView to disable scroll effect. If you want scrollable as secondary widget use primary: false, To have Full Page scrollable, you can use body:SingleChildScrollView(..) or better using body:CustomScrollView(..) Save this answer.

What is SliverGridDelegateWithFixedCrossAxisCount?

SliverGridDelegateWithFixedCrossAxisCount class Null safety. Creates grid layouts with a fixed number of tiles in the cross axis. For example, if the grid is vertical, this delegate will create a layout with a fixed number of columns.

What is GridView builder?

If your Flutter app needs to display a grid view of a large or infinite number of items (a list of products fetched from API, for instance) then you should use GridView. builder() instead of GridView(). The builder() is called only for those items that are actually visible so your app performance will be improved.


1 Answers

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!

like image 51
Hemanth Raj Avatar answered Sep 20 '22 07:09

Hemanth Raj