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 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.

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'),
          ),
        ],
      ),
    );
  }
}
Using ListView widget

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 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.

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]),
          );
        },
      ),
    );
  }
}
Using ListView widget

Code explanation

  • 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.

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 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

Copyright ©2024 Educative, Inc. All rights reserved