ListView In Flutter With Different Types

In this article, You will learn how to use different types of listview in flutter applications according to requirement. You can also check out expandable listview & gridview example.

In this tutorial, we are going to integrate every type of listview in flutter through example. We can implement listview by different ways. We can use listview in both directions vertical and horizontal. We can set static and dynamic data in listview. We can also customize listview row layout.

 

ListView Types

SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.red,
    child: Text(“Static”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => StaticListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.teal,
    child: Text(“Dynamic”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => DynamicListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.amberAccent,
    child: Text(“Divider”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => DividerListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.blue,
    child: Text(“Infinite”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => InfiniteListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.green,
    child: Text(“Horizontal”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => HorizontalListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.pink,
    child: Text(“Image”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => ImageWithListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.deepPurple,
    child: Text(“Card”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute(builder: (context) => CardListView()), );
    },
),
SizedBox(
    height: 15,
),
RaisedButton(
    textColor: Colors.white,
    color: Colors.deepOrange,
    child: Text(“Click Event”, style: TextStyle(fontSize: 22)),
    onPressed: () {
        Navigator.push( context, MaterialPageRoute( builder: (context) => ClickEventListView()), );
    },
),
SizedBox(
    height: 15,
),
],
),
),
),
),
);
 
 
 

Static ListView in Flutter

If we have small amount of data we can use static listview in flutter applications. For static listview, we can use default listview constructor.

ListView(
children: [
ListTile(
    title: Text(‘Cristiano Ronaldo’),
),
ListTile(
    title: Text(‘Lionel Messi’),
),
ListTile(
    title: Text(‘Neymar Jr.’),
),
ListTile(
    title: Text(‘Kevin De Brune’),
),
ListTile(
    title: Text(‘Robert Lewandowski’),
),
ListTile(
    title: Text(‘Kylian Mbappe’),
),
ListTile(
    title: Text(‘Virgil van Dijk’),
),
ListTile(
    title: Text(‘Sadio Mane’),
),
ListTile(
    title: Text(‘Mohamed Salah’),
),
],
),
 
listview in flutter
 
 

Dynamic ListView in Flutter

If we get data from api or any storage then we cant set data in static listview. For this we need to use ListView.builder constructor.

final soccerPlayers = [‘Cristiano Ronaldo’, ‘Lionel Messi’, ‘Neymar Jr.’, ‘Kevin De Brune’, ‘Robert Lewandowski’, ‘Kylian Mbappe’, ‘Virgil van Dijk’, ‘Sadio Mane’, ‘Mohamed Salah’];

ListView.builder(
    itemCount: soccerPlayers.length,
    itemBuilder: (context, index) {
        return ListTile(
            title: Text(soccerPlayers[index]),
        );
    },
),

 
 
 

ListView with Divider

By default listview does not have separator or divider in flutter applications. We can set divider by using ListView.separated constructor.

final soccerPlayers = [‘Cristiano Ronaldo’, ‘Lionel Messi’, ‘Neymar Jr.’, ‘Kevin De Brune’, ‘Robert Lewandowski’,’Kylian Mbappe’, ‘Virgil van Dijk’, ‘Sadio Mane’, ‘Mohamed Salah’];

ListView.separated(
    itemCount: soccerPlayers.length,
    itemBuilder: (context, index) {
        return ListTile(
            title: Text(soccerPlayers[index]),
        );
    },
    separatorBuilder: (context, index) {
        return Divider(
            color: Colors.black,
        );
    },
),

 
listview in flutter
 
 

Infinite ListView in Flutter

For infinite listview, we need to just remove itemCount parameter in ListView.builder constructor.

ListView.builder(
    itemBuilder: (context, index) {
        return ListTile(
            title: Text(‘Soccer Player $index’),
        );
    },
),
 
 
 

Horizontal ListView

We can display listview in horizontal direction by using scrollDirection parameter as horizontal.

final soccerPlayers = [‘Cristiano Ronaldo’, ‘Lionel Messi’, ‘Neymar Jr.’, ‘Kevin De Brune’, ‘Robert Lewandowski’,’Kylian Mbappe’, ‘Virgil van Dijk’, ‘Sadio Mane’, ‘Mohamed Salah’];

ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: soccerPlayers.length,
    itemBuilder: (context, index) {
        return Container(
            padding: const EdgeInsets.symmetric(horizontal: 5),
            color: Colors.deepOrange,
            child: Center(
                child: Text(soccerPlayers[index], style: TextStyle(color: Colors.white)),
            ),
        );
    },
),

 
listview in flutter
 
 

ListView Row with Image

leading parameter is used to display image in ListTile widget in listview.

final soccerPlayers = [‘Cristiano Ronaldo’, ‘Lionel Messi’, ‘Neymar Jr.’, ‘Kevin De Brune’, ‘Robert Lewandowski’,’Kylian Mbappe’, ‘Virgil van Dijk’, ‘Sadio Mane’, ‘Mohamed Salah’];

ListView.builder(
    itemCount: soccerPlayers.length,
    itemBuilder: (context, index) {
        return ListTile(
            leading: Icon(Icons.person),
            title: Text(soccerPlayers[index]),
        );
    },
),

 
 
 

ListView with Card UI

We can also customize listview row layout. Here we are using Card widget to display listview row as cardview.

final soccerPlayers = [‘Cristiano Ronaldo’, ‘Lionel Messi’, ‘Neymar Jr.’, ‘Kevin De Brune’, ‘Robert Lewandowski’,’Kylian Mbappe’, ‘Virgil van Dijk’, ‘Sadio Mane’, ‘Mohamed Salah’];

ListView.builder(
    itemCount: soccerPlayers.length,
    itemBuilder: (context, index) {
        return Card(
            child: ListTile(
                leading: Icon(Icons.person),
                title: Text(soccerPlayers[index]),
            ),
        );
    },
),

 
 
 

ListView with Click Event

If we want to perform some operations on click of listview row then we can implement it in flutter as below.

final soccerPlayers = [‘Cristiano Ronaldo’, ‘Lionel Messi’, ‘Neymar Jr.’, ‘Kevin De Brune’, ‘Robert Lewandowski’,’Kylian Mbappe’, ‘Virgil van Dijk’, ‘Sadio Mane’, ‘Mohamed Salah’];

ListView.builder(
    itemCount: soccerPlayers.length,
    itemBuilder: (context, index) {
        return GestureDetector(
            child: ListTile(
                title: Text(soccerPlayers[index]),
            ),
            onTap: () {
                print(soccerPlayers[index]);
            },
        );
    },
),

 
 

Leave a Reply