ListView.separated in Flutter

Introduction

ListView.separated helps you show a list of items with a clear divider between each item. It makes your list look neat and easy to read.

When you want to show a list of messages with lines between each message.

When displaying a list of contacts with a space or line separating each contact.

When you want to separate items in a shopping list visually.

When you want to add a custom widget as a separator, like a space or a line.

When you want a scrollable list with clear breaks between items.

Syntax

Flutter

ListView.separated(
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
    return WidgetForItem;
  },
  separatorBuilder: (BuildContext context, int index) {
    return WidgetForSeparator;
  },
)

itemCount tells how many items are in the list.

itemBuilder creates each item widget.

separatorBuilder creates the widget that goes between items, like a divider.

Examples

Shows 3 text items separated by a simple line.

Flutter

ListView.separated(
  itemCount: 3,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Divider(),
)

Handles empty list gracefully by showing nothing.

Flutter

ListView.separated(
  itemCount: 0,
  itemBuilder: (context, index) => Text('No items'),
  separatorBuilder: (context, index) => Divider(),
)

Shows one item with no separator after it.

Flutter

ListView.separated(
  itemCount: 1,
  itemBuilder: (context, index) => Text('Only one item'),
  separatorBuilder: (context, index) => SizedBox(height: 10),
)

Sample App

This app shows a list of 5 items. Each item has a number inside a circle and a text label. Between each item is a blue line divider.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ListView.separated Example')),
        body: ListView.separated(
          itemCount: 5,
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(child: Text('${index + 1}')),
              title: Text('Item number ${index + 1}'),
            );
          },
          separatorBuilder: (context, index) => const Divider(color: Colors.blue),
        ),
      ),
    );
  }
}

Important Notes

The separatorBuilder is called one less time than itemBuilder because separators go between items.

Using ListView.separated is better than manually adding dividers inside itemBuilder because it keeps code clean and efficient.

Remember that separators do not appear after the last item.

Summary

ListView.separated creates a scrollable list with separators between items.

You provide how to build each item and how to build each separator.

Separators help make lists easier to read and look nicer.