Here, You’ll understand all the types of ListView widget/constructor available in the Flutter Library, but before then, we need to know what a ListView widget is and what it does. According to the Flutter.dev official website;
The ListView is one of the most commonly used widgets for scrolling and building lists. It actually displays its children/other widgets one after another in the scroll direction according to your instruction. In Flutter, you have the ability to set a scroll direction for your ListView.
How to set the direction of your ListView
in Flutter, See below;
Widget _build(BuildContext context) { return ListView.builder( scrollDirection: Axis.vertical, //You can also use the Axis.horizontal itemCount: _people.length, itemBuilder: (BuildContext context, int i) { return PersonCard(_peopleList[i]); }, ); }
The ListView
widget in Flutter actually has 4 different ways to use it:
The 4 types of ListView in FLutter
- new ListView
Normal use. It has a children property that takes a collection of static widgets.
- ListView.builder
For dynamically creating children from a list of items.
- ListView.separated
Like builder but also puts a widget ∗between∗ each item. Great for inserting ads in the list periodically. Read more at http://bit.ly/flutter_listview_separated.
- ListView.custom
For rolling your own advanced listviews. Read more at http://bit.ly/flutter_listview_custom.
Let’s take a look at the first two options starting with the regular ListView.
Regular ListView: When you have a few widgets to display
Generically, a ListView takes a small number of other widgets and makes it scrollable. Why a “small number”? Because this is designed to be a static list, one that you, the developer, simply types into the build()
method by hand. In fact, oftentimes the way you discover you’ll need a regular ListView is when your column overflows. The fix is either to remove children, resize the children, or simply change the Column to a ListView. Columns and ListViews both have a children property:
Widget _build(BuildContext context) { return ListView( children: <Widget>[ FirstWidget(), SecondWidget(), ThirdWidget(), ], ); }
This version of ListView is great for a small number of widgets to display, but where ListView really shines is when you want to display a list of things – people, products, stores – anything you’d retrieve from a database or Ajax service. For displaying an indeterminate number of scrollable items, we’ll want the ListView.builder constructor.
ListView.builder: When you’re building widgets from a list of objects
ListView’s alternative constructor, ListView.builder receives two parameters, an itemCount
and an itemBuilder
property that is a function. This makes the ListView lazy-loaded. The itemBuilder function dynamically creates children widgets on demand. As the user scrolls close to the bottom of the list, itemBuilder creates new items to be scrolled into view.
And when we scroll something far enough off the screen, it is paged out of memory and disposed of. Pretty cool.
Widget _build(BuildContext context) { return ListView.builder( scrollDirection: Axis.vertical, //You can also use the Axis.horizontal itemCount: _people.length, itemBuilder: (BuildContext context, int i) { return PersonCard(_peopleList[i]); }, ); }
The itemCount property is an integer that tells us how many things we’re going to draw so we usually set it to the length of the array/collection of things we’re scrolling through. The itemBuilder function receives two parameters: the context and an integer which is 0 for the first item and increments each time it is run.
We’ve covered laying out the scene including what to do if there is extra space on the scene or there isn’t enough of it. So let’s cover the last of our five topics, how to fine-tune the spacing and position of widgets. We’ll do this by exploring the box model.