What is the difference between ListView() and ListView.builder() in flutter?

FLutter provides four ways of creating a ListView-

  1. ListView
  2. ListView.builder
  3. ListView.custom
  4. ListView.separated

Here, in this post, we will know about the difference between creating ListView using the default constructor and creating ListView using the ListView.builder().

First, let’s see ListView using the default constructor.

When we create ListView using the default constructor then we pass List<Widget> of children to it. Let’s see an example and then I will explain it more.

Example 1 –

ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(8.0),
          height: 100,
          color: Colors.pink.shade900,
          child: const Center(child: Icon(
              Icons.call,
          size: 80,)),
        ),
        Container(
          margin: EdgeInsets.all(8.0),
          height: 100,
          color: Colors.pink.shade800,
          child: const Center(child: Icon(
            Icons.message,
            size: 80,)),
        ),
        Container(
          margin: EdgeInsets.all(8.0),
          height: 100,
          color: Colors.pink.shade700,
          child: const Center(child: Icon(
            Icons.video_call,
            size:80 ,)),
        ),
        Container(
          margin: EdgeInsets.all(8.0),
          height: 100,
          color: Colors.pink.shade600,
          child: const Center(child: Icon(
            Icons.email,
            size: 80,)),
        ),
        Container(
          margin: EdgeInsets.all(8.0),
          height: 100,
          color: Colors.pink.shade500,
          child: const Center(child: Icon(
            Icons.access_alarm,
            size: 80,)),
        ),
        Container(
          margin: EdgeInsets.all(8.0),
          height: 100,
          color: Colors.pink.shade400,
          child: const Center(child: Icon(
            Icons.add_a_photo,
            size: 80,)),
        ),
      ],
    );

(See full code – Click here)

You can see in the above code that I have passed List of widgets as children to the ListView default constructor.

Output :

Now the question is – When do we create a ListView using the default constructor?

We create ListView using the default constructor when we have a small number of children because it constructs even those children that are invisible (The user has not yet scrolled the list to view those children.) to the user.

For example – We have 20 items to display and only 10 items are visible on the screen and the rest items will be visible as the user scrolls. So, at a time we only need 10 items to be constructed, but when we use the default constructor it will construct all the 20 items instead of just those 10 children that are actually visible. So it would be inefficient if we have a large number of children. But this is not the case with ListView.builder(). Let’s see it next.

Creating a ListView using ListView.builder()

When we create ListView using ListView.builder() then we pass two parameters to it. The First one is the itemCount, which is the number of items that you want to display. But, it is an optional parameter. And the second one is the itemBuilder, which builds the children on demand. Let’s see an example, then I will explain more.

Example –

class MyListView extends StatelessWidget
{

  final List<String> listItems = <String>['Item1', 'Item2', 'Item3', 'Item4', 'Item5' ,'Item6', 'Item7', 'Item8'];
  final List<int> colorCodes = <int>[900, 800, 700, 600, 500, 400 ,300 ,100];
  @override
  Widget build(BuildContext build)
  {
    return

    ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: listItems.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 80,
            margin: EdgeInsets.all(8.0),
            color: Colors.pink[colorCodes[index]],
            child: Center(child: Text(listItems[index])),
          );
        }
    );
  }
}

(See full code – Click here)

You can see in the above code that first I have created a list of items (final List<String> listItems), and then I have used the ListView.builder() to display those items(itemBuilder constructs the widgets for the items.).

Output :

So now the question is – When do we create ListView using ListView.builder()?

As I mentioned earlier that it builds children on demand. So, We use ListView.builder() when we have a large(or infinite) number of children because at a time it builds only those children that are visible on the screen. If we take our earlier example of 20 items then with the ListView.builder(), first only 10 items will be constructed and as the user scrolls then the next item will be constructed.

So, in short, ListView() construct all the child, that could possibly be displayed in the list view instead of just those children that are actually visible., and with ListView.builder() the builder is called only for those children that are actually visible.

So that’s all about ListView() and ListView.builder()

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: