Flutter Lists & Grids: ListView, GridView & Builder (2025 Guide)

Scrolling in Flutter: Lists vs. Grids

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.

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

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

NEVER use a standard `ListView` for long lists (e.g., 100+ items). It will crash your app by trying to render them all at once.

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

final List 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.

The Fix: Wrap the ListView in an Expanded() widget. This tells the list exactly how much space it can occupy.

Conclusion

Use ListView for static content and ListView.builder for dynamic data from APIs or databases.

Want to learn how to fetch data for these lists? Check out our Full Flutter Networking Course.