ListView Widget In Flutter

Introduction

Hi friends!! In this article, you will learn about the ListView widget and several types of ListView widgets available in Flutter. In Flutter, a ListView is really good widget when we have a list of items, and we want to display them vertically or horizontally. It provides scrolling automatically when the content exceeds the available screen space.

Source:-"Flutter Flow"

There are several types of ListView widgets available in Flutter. Each widget has its own characteristics and use cases. Some of the most commonly used ListView widgets are as follows.

• ListView
• ListView.builder
• ListView.separated

ListView in Flutter

ListView is the most basic widget that uses for displaying a list of items. ListView is a great choice if we have a static and short amount of data. 

Syntax

ListView(
  children: <Widget>[
    // List of child widgets
  ],
)

Example

  Widget buildListView() {
    return ListView(
      children: const [
        Text("Item 1"),
        SizedBox(height: 10,),
        Text("Item 2"),
        SizedBox(height: 10,),
        Text("Item 3"),
        SizedBox(height: 10,),
        Text("Item 4"),
        SizedBox(height: 10,),
        Text("Item 5"),
        SizedBox(height: 10,),
        Text("Item 6"),
        SizedBox(height: 10,),
        Text("Item 7"),
        SizedBox(height: 10,),
        Text("Item 8"),
        SizedBox(height: 10,),
        Text("Item 9"),
        SizedBox(height: 10,),
        Text("Item 10"),
        SizedBox(height: 10,),
        Text("Item 11"),
        SizedBox(height: 10,),
        Text("Item 12"),
        SizedBox(height: 10,),
        Text("Item 13"),
        SizedBox(height: 10,),
        Text("Item 14"),
        SizedBox(height: 10,),
        Text("Item 15"),
        SizedBox(height: 10,),
        Text("Item 16"),
        SizedBox(height: 10,),
        Text("Item 17"),
        SizedBox(height: 10,),
        Text("Item 18"),
        SizedBox(height: 10,),
        Text("Item 19"),
        SizedBox(height: 10,),
        Text("Item 20"),
      ],
    );
  }

Here we are defining a function name buildListView() that will return a ListView Widget. Inside the ListView, there is a list of children, which are the items you want to display in the list. Inside children, we take a Text and a SizeBox. SizeBox is used for spacing purposes.

Output

 

ListView.builder in Flutter

ListView.builder is used to overcome the limitation of the ListView Widget. ListView is used when we have dynamic and large amounts of data. 

Syntax

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
    // Return a widget for the item at the given index
  },
)

Example

Widget buildListViewBuilder(){

    List itemList=[];
    for(int i=1;i<=30;i++){
      itemList.add("Item $i");
    }
    
    return ListView.builder(
      itemCount: itemList.length,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(itemList[index]),
        );
      },
    );
    
}

Here we define a function buildListViewBuilder() that returns ListView.builder. We are creating an empty list called itemList and adding some data using a loop, and set this data into Text which is used inside ListView.builder. We have to assign the length of the list to the itemCount property.

Output

 

ListView.separated in Flutter

ListView.separated is exactly the same as ListView.builder, but the only difference is it allows you to create a list with separators between items. It's useful when you want to display a separator between each item, such as a divider.

Syntax

ListView.separated(
  itemCount: itemCount,
  separatorBuilder: (BuildContext context, int index) => Divider(),
  itemBuilder: (BuildContext context, int index) {
    // Return a widget for the item at the given index
  },
)

Example

Widget buildListViewSeparated(){

    List itemList=[];
    for(int i=1;i<=30;i++){
      itemList.add("Item $i");
    }

    return ListView.separated(
      itemCount: itemList.length,
      separatorBuilder: (context, index) {
        return const Divider(height: 2,color: Colors.grey);
      },
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(itemList[index]),
        );
      },
    );
}

Here we are using ListView.separated, which is exactly the same as ListView.builder. The only difference is we have a separatorBuilder function that is used to provide a separator, such as Divider, between each pair of items.

Output

 

Conclusion

In this article, we have seen how to use ListView, ListView.builder, and  ListView. separated. Thanks for reading, and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!