How to use ListView in Flutter
Every now and then, you might need a scrollable list in your Flutter app to display a list of widgets and create a dynamic and interactive user interface. One of the widgets that comes into play in this scenario is the ListView widget.
What is a ListView widget?
In Flutter, The ListView widget is a highly versatile and efficient component that is used to display a scrollable list of child widgets. It is one of the most common tools for building dynamic interfaces that house a large number of components or widgets.
Using ListView widget, you can display all the components in a very efficient and visually pleasing manner as it provides a built-in scrolling mechanism. This mechanism allows users to scroll through a long list of items that is too large to fit within the screen's dimensions.
How can we customize the ListView widget?
Flutter provides a variety of properties that can be specified within the ListView widget in order to customize the appearance and behavior of the widget itself. Moreover, the widget's functionality can also be modified through its parameters.
Some of the most common properties include:
padding: You can add padding around theListViewusing thepaddingproperty.scrollDirection: By default, theListViewscrolls vertically. You can change the scroll direction to horizontal by settingscrollDirectiontoAxis.horizontal.separatorBuilder: If you want to add separators between list items, you can use theseparatorBuilderproperty. It takes a callback function that builds the separator widget.
Types of ListView
There are mainly two types of ListView that can be incorporated into your Flutter app.
Static ListView
Dynamic ListView
Static ListView
In Static ListView, we simply use the ListView widget and define the children as a list of widgets that we want our page to display.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ListViewExample(),
);
}
}
class ListViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView Example'),
),
body: 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'),
),
ListTile(
title: Text('Item 6'),
),
ListTile(
title: Text('Item 7'),
),
ListTile(
title: Text('Item 8'),
),
ListTile(
title: Text('Item 9'),
),
],
),
);
}
}
Code explanation
In this example, we define a MyApp class as the root widget for our application. It sets up the MaterialApp with a title and a theme. The home property of MaterialApp is set to an instance of the ListViewExample class, which represents the screen displaying the ListView.
Lines 20–25: The
ListViewExampleclass extendsStatelessWidgetand overrides thebuildmethod. Inside thebuildmethod, we create aScaffoldwidget as the container for our screen. TheScaffoldprovides an app bar with a title and a body section.Lines 27–39: We place the
ListViewwidget, and within it, we add threeListTilewidgets representing the list items with the titles Item 1, Item 2, and Item 3.
Dynamic ListView
In other scenarios, you might often need to display a dynamic list of data that houses a large number of components or widgets. For handling such scenarios, Flutter provides a built-in ListView.builder constructor that can be used.
Here's how you can use it:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView.builder Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ListViewBuilderExample(),
);
}
}
class ListViewBuilderExample extends StatelessWidget {
final List<String> itemList = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
'Item 7',
'Item 8',
'Item 9',
'Item 10',
'Item 11',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView.builder Example'),
),
body: ListView.builder(
itemCount: itemList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(itemList[index]),
);
},
),
);
}
}
Code explanation
Lines 36–40: The
ListViewBuilderExampleclass extendsStatelessWidgetand overrides thebuildmethod. Inside thebuildmethod, we create aScaffoldwidget as the container for our screen. TheScaffoldprovides an app bar with a title and a body section.Lines 41–43: We use the
ListView.builderconstructor. TheitemCountproperty is set to the length of theitemList, which determines the number of items in the list.Lines 43–46: The
itemBuildercallback function is responsible for building each list item. It creates aListTilewidget for each item in theitemList, displaying the corresponding text.
Advantages of using Dynamic ListView
There are several advantages of using Dynamic ListView, such as:
Optimized performance: It enhances the performance of the app by dynamically rendering only a specific portion of the application.
Memory efficiency: As it builds only specific widgets at a time, it significantly decreases the application's memory footprint.
Flexible item count: Allows specifying the number of items in a list with the
itemCountparameter.Flexible item customization:
ListView.builderallows you to customize each item individually based on its index. This flexibility enables you to apply different styles or layouts to specific items
Free Resources
