Flutter Lists & Grids: The Ultimate Scrolling Guide (2025)

#flutter #mobile #beginners #programming

This guide was originally published on SRF Developer. Check out the blog for more Flutter tutorials.

When you have more content than fits on the screen, you need scrolling.

Flutter provides two main widgets for this:

ListView: Arranges items sequentially (like a news feed).
GridView: Arranges items in a 2D array (like an Instagram profile).

📜 1. Basic ListView

Use this for simple lists with a small number of children (e.g., a Settings menu).

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.map),
      title: "Text('Map'),"
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: "Text('Album'),"
    ),
  ],
)

🚀 2. The "Builder" (For Big Lists)

Critical Performance Tip: NEVER use a standard ListView for long lists (e.g., 100+ items). It tries to render them all at once and will crash your app.

Instead, use ListView.builder. It only renders what is visible on the screen (Lazy Loading).

final List<String> myItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

ListView.builder(
  itemCount: myItems.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: "Text(myItems[index]),"
    );
  },
)

▦ 3. GridView

To create a grid, the most common method is GridView.count.

GridView.count(
  crossAxisCount: 2, // 2 Columns
  crossAxisSpacing: 10, // Horizontal space
  mainAxisSpacing: 10, // Vertical space
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
  ],
)

⚠️ The #1 Error: "Vertical viewport was given unbounded height"

This happens if you put a ListView inside a Column. Flutter doesn't know how tall the list should be, so it tries to expand infinitely.

The Fix: Wrap the ListView in an Expanded() widget.

Column(
  children: [
    Text("Header"),
    // The list will fill the remaining space
    Expanded(
      child: ListView(children: ...),
    ),
  ],
)