ez_grid_view

A defensive, self-aware version of GridView.builder that won't crash when placed in an unbounded-height parent.

Problem

Flutter's GridView is a powerful and efficient way to display scrollable lists of data. However, it has a major weakness: it requires its parent to provide bounded (finite) height. If you place a GridView inside a Column or Row, you'll get a layout crash with a cryptic error message.

This is a common frustration for Flutter developers, especially newcomers. The fix is to wrap the GridView in a widget that provides bounded height, such as Expanded or SizedBox.

Solution

EzGridView is a drop-in replacement for GridView.builder that automatically handles this problem. It detects when it's in an unbounded-height environment and applies a fix to prevent the crash.

In debug mode, it also provides a detailed error message in the console and a visual indicator (a red border) to let you know that a fix was applied. This helps you identify and fix the underlying layout issue.

Features

  • Crash protection: Automatically prevents layout crashes from unbounded height.
  • Debug-friendly: Provides detailed error messages and visual indicators in debug mode.
  • Drop-in replacement: Use it just like you would use GridView.builder.
  • Lightweight: No external dependencies.

Usage

Replace GridView.builder with EzGridView.builder:

// Before
GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
);

// After
EzGridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
);

For a complete example, see the example directory.

Contributing

Contributions are welcome! Please feel free to open an issue or submit a pull request.

Libraries

ez_grid_view