Trendlist: [New post] ListView in flutter

Thursday, December 16, 2021

[New post] ListView in flutter

Respond to this post by replying above this line

ListView in flutter

by Sanjib Sinha

Photo by Mandeep Boparai on Unsplash

ListView is not like other ListView constructors and good for a small list of children.

We've already discussed how a custom scroll view works. A ListView is basically a CustomScrollView.

However, a custom scroll view has many features that a ListView doesn't have. As a result, a ListView is not always sufficient.

We may ask, what is the limitation of ListView?

Firstly, although a ListView is a custom scroll view, it's got only useful feature from custom scroll view; and, that is a single SliverList in its CustomScrollView.slivers property.

Let's try to understand this concept and dig deep.

Sometimes, and in many case, most of the time, we need a SliverAppBar. With reference to this, you may read our previous post on collapsing toolbar.

In such cases, ListView is not sufficient. Therefore, in those cases, it's wise to use CustomScrollView directly.

However, a ListView and a CustomScrollView has some similarities too. At least, if you consider a few properties, such as, key, controller, etc.

How do I use ListView in flutter?

Before we use ListView let us try to understand a few other key concepts.

Apart from these similarities and differences, we need to use ListView frequently. In fact, although there are many scrolling widgets, still ListView is the most commonly used. It displays children one after another while we scroll.

Let's see the one example of ListView where it displays a list of student instances one after another.

Now, as the scroll direction takes us towards the lower section, we can see the third and the last student instance.

How many types of ListView are there in flutter?

We can construct ListView using four methods. We've already seen how we can use ListView by constructors like ListView.builder, ListView.custom, and ListView.separated.

Likewise, the ListView constructor takes an List<Widget> of children. We'll see in a minute, how this constructor fits for the list of instances to be displayed as children.

But, there is a caveat that we should take care of. ListView is good for small number of children. Since, it doesn't build child items on demand, it requires heavy work in constructing the List of children.

The ListView constructs every child; whether they are in the viewport being displayed in the list view, or not. As a result it's wise to work with small number of items. And, that saves system resources, making our flutter app highly performant.