Understanding The Flutter ListView Widget

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:

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.