[Standard] How to Use ListView.builder for Optimal List Display

In Flutter, ListView.builder is used for displaying lists. Although I frequently use it myself, I didn’t know all the ways it could be utilized.

This time, I will introduce how to use ListView.builder.

Basic Usage of ListView.builder

First, let’s look at a basic implementation of ListView.builder.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder Example'),
        ),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  // Creating list items
  final List<String> items = List<String>.generate(20, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length, // Specifies the number of items in the list
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('${items[index]}'),
        );
      },
      scrollDirection: Axis.vertical, // Sets the scroll direction to vertical
      reverse: false, // Does not reverse the order
      padding: EdgeInsets.all(8.0), // Adds 8 pixels of padding around the entire list
      primary: true, // Specifies whether this is the primary scroll view
      shrinkWrap: false, // Does not adjust the height based on the content
      physics: BouncingScrollPhysics(), // Specifies the scroll behavior
      addAutomaticKeepAlives: true, // Specifies whether each item is automatically kept alive
      addRepaintBoundaries: true, // Specifies whether each item has a repaint boundary
      addSemanticIndexes: true, // Specifies whether each item has semantic indexes
    );
  }
}

This code displays 20 list items using ListView.builder.

Properties of ListView.builder

ListView.builder provides various properties.

itemCount (optional)

itemCount is a property that specifies the number of items in the list. Although it is not required, setting this property makes the number of items in the list explicit and can improve the performance of the list.

itemBuilder (required)

itemBuilder is a property that generates each item. It processes each list item and returns the widget to be displayed.

scrollDirection (optional)

scrollDirection specifies the scroll direction of the list. It can be set to vertical (Axis.vertical) or horizontal (Axis.horizontal). The default is vertical.

reverse (optional)

reverse specifies whether to reverse the order of the list. Setting it to true reverses the display order of the list. The default is false.

padding (optional)

padding specifies the inner padding of the entire list. This property is common in other widgets as well. For example, setting EdgeInsets.all(8.0) adds 8 pixels of padding on all sides of the list.

primary (optional)

primary specifies which view should have scroll priority when there are nested scroll views. Setting it to true prioritizes this list for scrolling. The default is true.

shrinkWrap (optional)

shrinkWrap specifies whether the list should take up only the necessary size. Setting it to true makes the list adjust its height based on its content. The default is false.

physics (optional)

physics specifies the scroll behavior of the list. There are BouncingScrollPhysics and ClampingScrollPhysics, among others. The default is BouncingScrollPhysics.

addAutomaticKeepAlives (optional)

This property specifies whether each item is automatically kept alive. Keeping list items in memory even when they are not displayed on the screen ensures smooth scrolling, but having too many items can degrade performance. The default is true.

addRepaintBoundaries (optional)

This property specifies whether each item has a repaint boundary. Setting it to true means only the changed item will be repainted. Setting it to false means the entire list will be repainted when there are changes. The default is true.

addSemanticIndexes (optional)

This property specifies whether each item has semantic indexes. Semantic indexes allow screen readers and other accessibility tools to correctly read out the order and position of list items. The default is true.

Summary

I had only used “itemCount” and “itemBuilder” before, but after researching, I found that there are many other properties available. “scrollDirection” and “shrinkWrap” seem particularly useful in certain situations.

There are also other useful list widgets in Flutter that I plan to introduce in the future.