Displaying elements in a list is a very common pattern in mobile applications. The user sees a collection of items and can scroll through them. The collection of items can be a list, a grid or another structured representation of data.

In this tutorial, we are going to learn how to create a simple ListView from a list of items. We’ll also learn to add items, add divider and onTap on the item. The ListView we are going to design contains a list of String.

1. Create Datasource

First, we’ll need a data source to work with ListView. For example, your data source might be a list of items, or products in a store. Most of the time, this data will come from the internet or a database.

2.Create Stateful Widget

Stateful widgets are useful when the list of items can change dynamically, e.g. add or remove items from list.

First, we have created a stateful widget. Then we have taken one floatingActionButton, and when the user presses the button, we will add the new item to the list and display.

3.Create ListView Widget

In order to display our List of Items, we’ll need to render each item as a Widget.

ListView.builder creates a scrollable, linear array of widgets that are created on demand. It is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

4.Adding ListView Divider

ListView.separated constructor is appropriate for list views with a large number of item and separator children. Separators only appear between list items: separator 0 appears after item 0 and the last separator appears before the last item.

5.Handling onTap Events

onTap event Called when the user taps this list tile.

Complete example