Lists and Scrolling

Displaying collections of data.

1 min read | Flutter Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Explore Pro Courses

Lists in Flutter

ListView.builder creates scrollable lists efficiently. ListTile provides a standard list item layout. ListView.separated adds dividers between items. You can also make horizontal scrolling lists.

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.star),
      title: Text('Item $index'),
      subtitle: Text('Description'),
    );
  },
)

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

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(width: 100, height: 100, color: Colors.red),
      Container(width: 100, height: 100, color: Colors.blue),
      Container(width: 100, height: 100, color: Colors.green),
    ],
  ),
)