Flutter ListView

Creating scrollable lists in Flutter

📜 What is ListView?

ListView is a scrollable widget that displays items in a linear arrangement. It's perfect for showing lists of data like contacts, messages, or products in your Flutter app. 


// Simple ListView example
ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Types of ListView

📋

ListView

Basic list with children 

ListView(
  children: [
    ListTile(title: Text('Item 1')),
  ],
)
🔨

ListView.builder

Efficient for large lists 

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)
âž—

ListView.separated

List with dividers 

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)
🎨

ListView.custom

Custom scroll behavior 

ListView.custom(
  childrenDelegate: 
    SliverChildBuilderDelegate(
      (context, index) {
        return Text('Item $index');
      },
    ),
)

🔹 Basic ListView Example

Create a simple scrollable list with multiple items: 

import 'package:flutter/material.dart';

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My List')),
      body: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.person),
            title: Text('John Doe'),
            subtitle: Text('Software Developer'),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Jane Smith'),
            subtitle: Text('Designer'),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Bob Johnson'),
            subtitle: Text('Manager'),
          ),
        ],
      ),
    );
  }
}

Output:

👤 John Doe
Software Developer
👤 Jane Smith
Designer
👤 Bob Johnson
Manager

🔹 ListView.builder for Dynamic Lists

Use ListView.builder for efficient rendering of large lists: 

class DynamicListView extends StatelessWidget {
  final List<String> items = List.generate(50, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            leading: CircleAvatar(
              child: Text('${index + 1}'),
            ),
            title: Text(items[index]),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              print('Tapped on ${items[index]}');
            },
          ),
        );
      },
    );
  }
}

Output:

1 Item 1 →
2 Item 2 →
3 Item 3 →

🔹 Horizontal ListView

Create a horizontally scrolling list: 

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 160,
      color: Colors.red,
      child: Center(child: Text('Box 1')),
    ),
    Container(
      width: 160,
      color: Colors.blue,
      child: Center(child: Text('Box 2')),
    ),
    Container(
      width: 160,
      color: Colors.green,
      child: Center(child: Text('Box 3')),
    ),
  ],
)

Output:

Box 1
Box 2
Box 3

🔹 ListView Best Practices

Tips for using ListView:

  • Use ListView.builder for large or dynamic lists
  • Add keys to list items for better performance
  • Use shrinkWrap: true when ListView is inside another scrollable widget
  • Set itemExtent if all items have the same height
  • Use physics property to control scroll behavior

🧠 Test Your Knowledge

Which ListView constructor is best for large lists?