Flutter: All types of ListView

Before starting with ListView, first, take a look into Flutter.

Flutter:

Flutter is a Google cross-platform framework to create apps for both Android and iOS devices with a single code base.

ListView:

ListView is a scrollable widget commonly used in a flutter to show multiple items on the screen.

There are four types of ListView in flutter:

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

ListView:

It is the default constructor of the ListView class. It simply takes widgets and displays them on-screen with scrolling functionality.

1 2 3 4 5 6 7 8 9

child: ListView( children: [ Icon(Icons.people,size: 100,), Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),), Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),), ], ),

ListView.builder():

The builder() construct takes two main parameters:itemCount and itemBuilder. It constructs a repeating list of items.

1
2
3
4
5
6
7
8
9
child: ListView.builder(
    itemCount: 15,
    itemBuilder: (context,index){
      return ListTile(
        leading: Icon(Icons.textsms,color: Colors.brown,),
        title: Text('Mobile Dev Talk $index',
            style: TextStyle(color: Colors.black),),
      );
    }),

If we did not specify the itemCount the list will display infinite no of items.
ListView.seperated():
It is used to specify the separation widget between each item.
You can specify line as a sepearted or any thing else

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
child: ListView.separated(
    itemBuilder: (context,index){
    color = Colors.primaries[Random().nextInt(Colors.primaries.length)];
      return Card(
        elevation: 5,
        margin: EdgeInsets.only(bottom: 10,top: 10),
        color: color,
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Text(color.toString(),style: TextStyle(fontSize: 22),),
        ),
      );
    },
    separatorBuilder: (context,index){
      return Divider(
        color: color,
        height: 5,
        thickness: 5,
      );
    },
    itemCount: 10),
The sepearted view is not shown for last entry.

ListView.custom():

As the name suggests, the custom() builder allows you to build ListViews with custom features for how to build the list's children. SilverChildDelegate is the main parameter that is used to build items.

Two types of SilverChildDelegate are:

SilverChildListDelegate

SilverChildBuilderDelegate