4 min read

Flutter ListView

Updated: Aug 2

In Flutter, the ListView widget is a scrollable list of widgets arranged linearly, displaying its children one after another in either the vertical or horizontal scroll direction. It's a crucial widget in Flutter, commonly used for displaying lists of children.

When we need to create lists dynamically without duplicating code, we use ListView.builder instead of ListView. ListView.builder efficiently creates a scrollable, linear array of widgets.

ListView widget for working with lists, which is essential for displaying data in mobile apps. It's ideal for displaying lists containing only a few items. Additionally, ListView includes the ListTile widget, which offers more properties for visually structuring a list of data.

There are different types of flutter ListViews :

ListView
ListView.builder
ListView.separated
ListView.custom

ListView vs ListView.Builder

ListView	ListView.Builder
ListView is suitable for displaying a fixed list of widgets.	ListView.builder is more efficient for creating lists with a large number of dynamically generated items.
ListView requires you to provide all the children upfront.	ListView.builder allows you to generate items lazily, as needed, based on an input list or data source

Constructor

ListView Class

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

Properties of Flutter ListView

children

List of widgets to be displayed in the list. Suitable for a small number of fixed items.

ListView(
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
  ],
)

shrinkWrap

scrollDirection

itemExtent

padding

clipBehavior

physics

Properties of ListView.Builder

itemCount

The number of items in the list.

itemBuilder

scrollDirection, shrinkWrap, physics

Practice with widget:

ListView Example

Flutter ListView UI Design — Flutter ListView Example

class ListViewExample extends StatelessWidget {
  const ListViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff3555c0),
          leading: SvgPicture.asset(
            'assets/image/code_capp1.svg',
            fit: BoxFit.fitWidth,
          ),
          //remove this line
          title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
        ),
        body: ListView.builder(
          itemCount: 20, // Number of items in your list
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(
                child: Text('${index + 1}'),
              ),
              title: Text('Item ${index + 1}'),
              subtitle: Text('Subtitle for Item ${index + 1}'),
              onTap: () {
                // Action when item is tapped
                print('Tapped on Item ${index + 1}');
              },
            );
          },
        ),
      ),
    );
  }
}

ListView.Builder Example

ListView.separated Example

ListView.Custom Example

Dynamic ListView