ListView in Flutter is used to display a scrollable list of items. It is one of the most used widgets in Flutter. ListView is used to group various items in an array and display them in a list that can be scrolled. The list can be scrolled horizontally or vertically. ListView can be customized and optimized with various tricks to make it suit to project’s specific needs. In this blog, we will explore ListView, its types, and how to use different types of listview in a flutter.

1) ListView in Flutter

ListView is the most basic type of widget in Flutter. It displays a scrollable list of items, where each item is represented by a widget. Usually, this is used with a small number of children as List. It will also construct invisible elements in the list, so other numerous widgets may render this inefficiently.

Constructors of ListView

ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Example of ListView

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
    ListTile(title: Text('Item 4')),
    ListTile(title: Text('Item 5')),
  ],
)

In the above example, we’re using the ListTile widget to represent each item in the list. You can replace it with any widget of your choice.

Output

2) ListView.builder

The ListView.builder widget is used when you have a large number of items to display, and you don’t want to create all the widgets at once. Instead, it creates widgets as they become visible on the screen.

Constructor of ListView.builder

ListView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

The builder() constructor constructs a repeating list of widgets. The constructor takes two main parameters:

• An itemCount for the number of repetitions for the widget to be constructed (not compulsory).
• An itemBuilder for constructing the widget which will be generated ‘itemCount‘ times (compulsory).

If the itemCount is not specified, infinite widgets will be constructed by default.

Example of ListView.builder

ListView.builder(
  itemCount: 100,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(title: Text('Item $index'));
  },
)

In the above example, we’re using the itemCount property to specify the number of items to display. The itemBuilder property is a function that takes a BuildContext and an index as arguments and returns a widget to display at that index.

Output

3) ListView.separated

The ListView.separated widget is similar to ListView.builder, but it allows you to add separators between items.

In short, these are two intertwined lists of widgets: the main list and the separator list.

Constructor of ListView.separated

ListView.separated(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required IndexedWidgetBuilder itemBuilder,
@required IndexedWidgetBuilder separatorBuilder,
@required int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Example of ListView.separated

ListView.separated(
  itemCount: 100,
  separatorBuilder: (BuildContext context, int index) => Divider(),
  itemBuilder: (BuildContext context, int index) {
    return ListTile(title: Text('Item $index'));
  },
)

In the above example, we’re using the separatorBuilder property to specify the separator widget to use between items. In this case, we’re using the Divider widget.

Output

4) ListView.custom

The ListView.custom widget is a more flexible version of the ListView.builder widget. It allows you to provide your own delegate to control the creation of widgets. As a name, it allows you to create the list with the custom functionality.

Constructors for ListView.custom

const ListView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Example of ListView.custom

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(title: Text('Item $index'));
    },
    childCount: 100,
  ),
)

In the above example, we’re using the SliverChildBuilderDelegate to create the widgets. It takes a function that returns a widget to display at a given index, and a childCount property to specify the number of items to display.

Output

Conclusion

In this blog, we explored the different types of ListView in Flutter with examples. The ListView widget is the most basic type of ListView, ListView.builder is used when you have a large number of items to display, ListView.separated is similar to ListView.builder but allows you to add separators between items, and ListView.custom is a more flexible version of ListView.builder that allows you to provide your own delegate to control the creation of widgets. You can choose the appropriate type of ListView based on your app’s requirements.

Thanks for reading this article 

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us