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.
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.
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 the ListView
using the padding
property.
scrollDirection
: By default, the ListView
scrolls vertically. You can change the scroll direction to horizontal by setting scrollDirection
to Axis.horizontal
.
separatorBuilder
: If you want to add separators between list items, you can use the separatorBuilder
property. It takes a callback function that builds the separator widget.
There are mainly two types of ListView that can be incorporated into your Flutter app.
Static ListView
Dynamic 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'), ), ], ), ); } }
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 ListViewExample
class extends StatelessWidget
and overrides the build
method. Inside the build
method, we create a Scaffold
widget as the container for our screen. The Scaffold
provides an app bar with a title and a body section.
Lines 27–39: We place the ListView
widget, and within it, we add three ListTile
widgets representing the list items with the titles Item 1, Item 2, and Item 3.
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]), ); }, ), ); } }
Lines 36–40: The ListViewBuilderExample
class extends StatelessWidget
and overrides the build
method. Inside the build
method, we create a Scaffold
widget as the container for our screen. The Scaffold
provides an app bar with a title and a body section.
Lines 41–43: We use the ListView.builder
constructor. The itemCount
property is set to the length of the itemList
, which determines the number of items in the list.
Lines 43–46: The itemBuilder
callback function is responsible for building each list item. It creates a ListTile
widget for each item in the itemList
, displaying the corresponding text.
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 itemCount
parameter.
Flexible item customization: ListView.builder
allows you to customize each item individually based on its index. This flexibility enables you to apply different styles or layouts to specific items