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’),
),
],
),

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,
        );
    },
),

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.

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 Row with Image

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

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.

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.

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

CodingWithDhrumil

4 thoughts on “ListView In Flutter With Different Types”

Leave a Reply Cancel reply