ListView basics in Flutter

Introduction

A ListView helps you show many items in a scrollable list. It makes it easy to see long lists on small screens.

Showing a list of messages in a chat app.

Displaying a list of contacts or friends.

Listing products in a shopping app.

Showing a menu with many options.

Displaying search results that can scroll.

Syntax

Flutter

ListView(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

The children property takes a list of widgets to show in the list.

ListView automatically scrolls if items do not fit on the screen.

Examples

A simple list of three text items.

Flutter

ListView(
  children: [
    Text('Apple'),
    Text('Banana'),
    Text('Cherry'),
  ],
)

An empty list shows nothing but still scrolls if inside a scrollable parent.

Flutter

ListView(
  children: [],
)

A list with just one item.

Flutter

ListView(
  children: [
    Text('Only one item'),
  ],
)

Sample App

This app shows a scrollable list with 5 items using ListView and ListTile widgets.

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 Basics')),
        body: ListView(
          children: const [
            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')),
          ],
        ),
      ),
    );
  }
}

Important Notes

ListView scrolls vertically by default.

Use ListTile inside ListView for easy list rows with text and icons.

For very long lists, consider ListView.builder for better performance.

Summary

ListView shows a scrollable list of widgets.

Use the children property to add items.

It is great for showing lists that might be longer than the screen.