Flutter: ListView Widget Usage

ListView is the fundamental widget for creating scrollable lists in Flutter. It allows you to create items arranged vertically or horizontally. It's one of the most frequently used widgets for listing operations.

Live Demo

You can try this widget in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Basic Usage

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

Important Properties

Property	Description
scrollDirection	Scroll direction (vertical/horizontal)
padding	Inner padding
reverse	Reverse order
physics	Scroll behavior
shrinkWrap	Size fitting
itemExtent	Fixed item height

Classic Usage with ListTile

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Username'),
      subtitle: Text('Subtitle'),
      trailing: Icon(Icons.chevron_right),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.email),
      title: Text('Email'),
      subtitle: Text('[email protected]'),
      trailing: Icon(Icons.chevron_right),
    ),
  ],
)

Custom Row Design (Beyond ListTile)

You can create different row designs besides ListTile:

ListView(
  padding: EdgeInsets.all(8),
  children: [
    Container(
      padding: EdgeInsets.all(16),
      margin: EdgeInsets.only(bottom: 8),
      decoration: BoxDecoration(
        color: Colors.blue.shade50,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.blue),
      ),
      child: Row(
        children: [
          CircleAvatar(
            backgroundColor: Colors.blue,
            child: Icon(Icons.star, color: Colors.white),
          ),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Custom Title', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('Custom subtitle text'),
              ],
            ),
          ),
          IconButton(
            icon: Icon(Icons.favorite_border),
            onPressed: () {},
          ),
        ],
      ),
    ),
  ],
)

Horizontal ListView

You can arrange lists horizontally using the scrollDirection property:

Container(
  height: 120, // Fixed height required for horizontal list
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.red,
        child: Center(child: Text('1')),
      ),
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.green,
        child: Center(child: Text('2')),
      ),
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.blue,
        child: Center(child: Text('3')),
      ),
    ],
  ),
)

Dynamic Listing with ListView.builder

The .builder subclass is used for dynamic list creation. This method is very important for performance in large lists because it only creates visible items:

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(child: Text('$index')),
      title: Text('Item $index'),
      subtitle: Text('Description of this item'),
    );
  },
)

Custom Design with ListView.builder

final List<Map<String, dynamic>> items = [
  {'title': 'Flutter', 'icon': Icons.flutter_dash, 'color': Colors.blue},
  {'title': 'Dart', 'icon': Icons.code, 'color': Colors.teal},
  {'title': 'Firebase', 'icon': Icons.cloud, 'color': Colors.orange},
];

ListView.builder(
  itemCount: items.length,
  padding: EdgeInsets.all(16),
  itemBuilder: (context, index) {
    final item = items[index];
    return Card(
      margin: EdgeInsets.only(bottom: 12),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Icon(item['icon'], size: 40, color: item['color']),
            SizedBox(width: 16),
            Expanded(child: Text(item['title'], style: TextStyle(fontSize: 18))),
            ElevatedButton(
              onPressed: () {},
              child: Text('Details'),
            ),
          ],
        ),
      ),
    );
  },
)

ListView.separated with Dividers

ListView.separated(
  itemCount: 10,
  separatorBuilder: (context, index) => Divider(
    color: Colors.grey,
    height: 1,
  ),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

Scroll Control

final ScrollController _scrollController = ScrollController();

ListView.builder(
  controller: _scrollController,
  itemCount: 50,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

// Scroll list to top
_scrollController.animateTo(
  0,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

Summary

• ListView: Basic scrollable list widget
• scrollDirection: Horizontal or vertical scrolling
• ListView.builder: Dynamic and performant listing
• ListView.separated: Lists with dividers
• ListTile: Standard list item
• Custom designs: Different row designs with Container, Card

ListView is the building block of listing operations in Flutter and offers various subclasses suitable for different scenarios.