Flutter 6: Lists & Grid Display – Simple Guide with Examples

Flutter's list and grid widgets are essential for building dynamic and engaging user interfaces. This guide provides a simple yet comprehensive overview of how to use these widgets effectively.

ReorderableListView

The ReorderableListView widget allows users to drag and reorder items within a list. It's perfect for creating intuitive interfaces where users need to customize the order of elements.

• Makes list items draggable, allowing users to change their order.
• Requires an onReorder callback to update the list's data source.

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    // Update your list logic here
  },
  children: [
    for (final item in items)
      ListTile(key: ValueKey(item), title: Text(item)),
  ],
)

GridView

The GridView widget displays items in a scrollable grid format. It's ideal for showcasing data in a structured and visually appealing way.

• Lays out widgets in a scrollable grid format.
• Uses crossAxisCount to define the number of columns in the grid.

GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Center(child: Text('Item $index'));
  }),
)

ListView

The ListView widget displays a scrollable list of widgets, either vertically or horizontally. It's a fundamental widget for displaying lists of data.

• Displays a scrollable list of widgets.
• Can be oriented vertically or horizontally.
• Uses ListView.builder for efficient rendering of large lists.

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

To scroll horizontally, just set scrollDirection: Axis.horizontal.

GridTile

The GridTile widget is a flexible tile for GridView. Each grid item can have an optional header, footer, and child, providing a customizable structure for each tile.

• Each grid item has an optional header/footer + child.

GridTile(
  header: Text('Header'),
  child: Image.network('https://via.placeholder.com/150'),
  footer: Text('Footer'),
)

GridTileBar

The GridTileBar widget is used inside GridTile for adding text or icon bars on the top or bottom of the tile. It's a convenient way to add titles or actions to grid items.

• Used inside GridTile for text or icon bars on top or bottom.

GridTile(
  child: Image.network('https://via.placeholder.com/150', fit: BoxFit.cover),
  footer: GridTileBar(
    backgroundColor: Colors.black54,
    title: Text('Title'),
    trailing: Icon(Icons.favorite_border),
  ),
)

Pro Tip

Use SliverList and SliverGrid with CustomScrollView for advanced scroll effects and better performance in complex UIs.