When it comes to creating a list of data or a list of views in application, lots of people tend to use Column or Row when there is a much easier way to do so. Now creating a list of data within your application is a very common practice especially when you need to display a list of items in a customer cart or a list of products for shopping apps. Flutter provides a widely used widget known as ListView that mainly serves this purpose and guess what? it’s super easy to implement.
In this tutorial, we’ll learn Flutter ListView Vs ListView.builder widgets which are used for similar reasons but in very different ways and scenarios.
I will walk you through the important properties of each of them, explain the difference between them, and show you an example of how to implement them. So, without further ado, let’s jump right into our tutorial!
Table of Contents
Flutter ListView
To begin with, ListView is a scrollable widget that you can use to display a list of other widgets. For example, you can use ListView to display a list of restaurants, contacts, or products. ListView displays items either horizontally or vertically based on its specified properties. Also, ListView splits to 4 different types that can be used in different cases. These 4 types are as the following:
- ListView()
- ListView.builder()
- ListView.separate()
- ListView.custom()
In this tutorial, we’ll only be focusing on both ListView and ListView.builder.
In fact, Flutter ListView is best suitable when you need to display a small number of items. This is because ListView is a static list which means you need to manually create each item separately which can be troublesome when trying to display plenty of items. ListTile is commonly used to create the children of the ListView but you can also use any other widget instead.
Now, let’s take a look at ListView constructor and dive into its properties
ListView Constructor
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}
)
ListView Properties
| children | This property takes a list of widgets to be displayed within the ListView. ListTile is a common used widget but you can totally use any widget you want. |
| reverse | This property specifies whether the scroll view scrolls in the reading direction. When you set reverse to false, the scroll view scrolls from right to left. |
| physics | This property determines how the scroll view should respond to user input. For example, ScrollPhysics() forces the scroll view to be scrollable only if primary property is set to true. |
| shrinkWrap | This property specifies whether the size of the scrollable area will be determined by the contents inside the ListView. |
| scrollDirection | This property specifies the axis along which the scroll view scrolls. |
| itemExtent | This property takes a double value as the object to controls the scrollable area in the ListView. |
| scrollDirection | The axis along which the scroll view scrolls |
| primary | When this is true, the scroll view is scrollable even if it does not have sufficient content to actually scroll |
Example
In this example, I’ll show you how to implement ListView to create 3 items using Container widget.
ListView(
children: [
Container(
color: Colors.greenAccent.shade100,
margin: EdgeInsets.only(bottom: 1),
padding: const EdgeInsets.all(10),
child: ListTile(
trailing: Icon(Icons.favorite),
title: Text('Item 1'),
subtitle: Text('Substitle here'),
leading: Icon(Icons.person),
),
),
Container(
color: Colors.greenAccent.shade100,
margin: EdgeInsets.only(bottom: 1),
padding: const EdgeInsets.all(10),
child: ListTile(
trailing: Icon(Icons.favorite),
title: Text('Item 2'),
subtitle: Text('Substitle here'),
leading: Icon(Icons.person),
),
),
Container(
color: Colors.greenAccent.shade100,
margin: EdgeInsets.only(bottom: 1),
padding: const EdgeInsets.all(10),
child: ListTile(
trailing: Icon(Icons.favorite),
title: Text('Item 3'),
subtitle: Text('Substitle here'),
leading: Icon(Icons.person),
),
)
],
),
Output
Flutter ListView.builder
Creates a scrollable, linear array of widgets that are created on demand. This constructor 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. This process is called as lazily rendering widgets.
the ListView.Builder constructor will create items as they are scrolled onto the screen like on-demand. This is the best practice for development for List widget where items will only render only when items are going seen on the screen.
Now, we’ll take a look at ListView.builder constructor.
ListView.builder Constructor
ListView.builder(
- {Key? key,
- Axis scrollDirection = Axis.vertical,
- bool reverse = false,
- ScrollController? controller,
- bool? primary,
- ScrollPhysics? physics,
- bool shrinkWrap = false,
- EdgeInsetsGeometry? padding,
- double? itemExtent,
- Widget? prototypeItem,
- required IndexedWidgetBuilder itemBuilder,
- ChildIndexGetter? findChildIndexCallback,
- 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}
)
ListView.builder Properties
ListView.builder takes properties similar to ListView but has two special parameters known as itemCount and itemBuilder.
| itemCount | Specifies the number of widgets to be constructed within the ListView widget |
| itemBuilder | Used to construct the widgets that will be generated based on the ItemCount value |
Example
In this example, we’ll use ListView.builder to create 5 items dynamically without having to manually creating one by one.
ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.greenAccent.shade100,
margin: EdgeInsets.only(bottom: 1),
padding: const EdgeInsets.all(10),
child: ListTile(
trailing: Icon(Icons.favorite),
title: Text('Item'),
subtitle: Text('Substitle here'),
leading: Icon(Icons.person),
),
);
}),
Output
Using ListView.builder within a Column
Now, one common error that almost everyone gets is when trying to place ListView.builder inside a Column as its child. The main reason behind getting this error is not specifying proper constraint for the ListView widget. Also, Column widget expands to the maximum size in main axis direction (vertical axis), and so does the ListView causing a render flex error. Luckily, this issue can be solved in very simple steps
First of all, wrap the Column widget with a SingleChildScrollView. Then, you will need to set the ListView.builder shrinkWrap property to true. This step is to constraint the size of the ListView. Finally, you need set the physics property to ScrollPhysics to enable scrolling when there is insufficient amount of content within the ListView.
In the example below, I will show you an example to use ListView.builder inside a Column correctly.
Example
SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: 10,
physics: ScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.greenAccent.shade100,
margin: EdgeInsets.only(bottom: 1),
padding: const EdgeInsets.all(10),
child: ListTile(
trailing: Icon(Icons.favorite),
title: Text('Item'),
subtitle: Text('Substitle here'),
leading: Icon(Icons.person),
),
);
}),
],
),
)
Conclusion
This brings an end to Flutter ListView Vs ListView.builder tutorial. In this article, we learnt all about ListView and ListView.builder widgets and the difference between the both of them.
These widgets are commonly used and are so important to learn for every Flutter developer so make sure you practice them well.
Wanna learn more about Flutter? I have category called Flutter that’s ripe for you to explore. You can learn about Flutter widgets, layouts, onboarding screen, tabbar, inkwell and gesture detector, and practice with a bunch of real examples.
Also, don’t forget to like and share my Facebook page, share the post with those who care to learn, and subscribe to my blog to be one of the firsts to know about my newest posts!
