GridView in Flutter

What is GridView in Flutter?

GridView is a scrollable widget used to display items in a two-dimensional grid, such as galleries, dashboards, product lists, or category menus. In Flutter, it is the grid equivalent of ListView and automatically handles scrolling, layout constraints, and item recycling.

GridView is the appropriate choice when content is arranged in rows and columns and needs to scroll beyond the screen.

GridView.count – easy mode for beginners

For beginners, the simplest way to create a grid is GridView.count.

This constructor allows you to build a grid without dealing with complex delegate classes. It is perfect for static layouts like icon menus or simple dashboards.

GridView.count(
  crossAxisCount: 2,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.orange),
  ],
);

If you just want "two columns and some tiles", this is the fastest and most readable option.

GridView.builder for dynamic data

When your grid is based on data from an API, database, or a large list, you should always use GridView.builder.

GridView.builder creates items lazily, meaning widgets are built only when they appear on screen. This is critical for performance.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 1,
  ),
  itemCount: 20,
  itemBuilder: (context, index) => Card(
      child: Center(child: Text('Item $index')),
  ),
);

Rule of thumb:

• static UI → GridView.count
• dynamic or large data → GridView.builder

GridView with different sizes – the childAspectRatio trap

This is the most common source of confusion with GridView.

Problem: You add a Container with a fixed height, but GridView ignores it. Tiles look squashed or stretched.

Why this happens: GridView controls the size of its children. Individual height or width values are ignored.

The correct way: You control tile proportions using childAspectRatio.

childAspectRatio is width divided by height.

• 1.0 → square tiles
• 0.75 → taller tiles
• 1.5 → wider tiles

SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: 0.75,
);

If you try to fight GridView with height or width, you will lose. childAspectRatio is the only correct solution.

Dynamic GridView in Flutter

Dynamic grids usually combine:

• GridView.builder
• data from API or local storage
• lazy loading for performance

Never generate large grids using a for-loop inside children. That approach scales poorly and causes memory issues.

Animated GridView in Flutter

Flutter provides AnimatedGrid for simple insert and remove animations.

It is useful for small to medium grids where visual feedback matters. For large datasets, animations are usually handled at the item level instead.

GridView inside Column – common crash

Just like ListView, GridView inside Column or Row must be wrapped with Expanded.

Without Expanded, Flutter cannot determine the grid’s height and throws a layout error related to unbounded height.

This is one of the most common beginner crashes when working with grids.

Common mistakes with GridView

Typical beginner issues include:

• Using GridView.builder for small static layouts instead of GridView.count.
• Trying to control item height with Container instead of childAspectRatio.
• Placing GridView inside Column without Expanded.
• Generating grid items eagerly instead of lazily.
• Hardcoding column count without considering screen size.