adaptive_grid

A lightweight Flutter widget that turns a list of widgets into a responsive grid layout using flutter_layout_grid. It automatically adjusts the number of columns based on screen width, a minimum item width, and configurable spacing.

Supports both regular and sliver-based grids out of the box.


πŸ‘€ Preview

Sample 1

Sample 2


✨ Features

  • Fully responsive layout using minimumItemWidth
  • Auto-calculated column count and row sizes
  • Configurable horizontalSpacing and verticalSpacing
  • Optional SliverToBoxAdapter support via .sliver constructor
  • Built on top of the powerful flutter_layout_grid

πŸš€ Getting Started

Add this to your pubspec.yaml:

dependencies:
  adaptive_grid:

Import it in your Dart code:

import 'package:adaptive_grid/adaptive_grid.dart';

πŸ“¦ Usage

Regular grid

AdaptiveGrid(
  itemCount: items.length,
  minimumItemWidth: 200,
  horizontalSpacing: 16,
  verticalSpacing: 24,
  itemBuilder: (context, index) => ItemCard(data: items[index]),
)

Sliver grid (inside a CustomScrollView)

CustomScrollView(
  slivers: [
    AdaptiveGrid.sliver(
      itemCount: items.length,
      minimumItemWidth: 250,
      horizontalSpacing: 16,
      verticalSpacing: 24,
      itembBilder: (context, index) => ItemCard(data: items[index]),
    ),
  ],
)

πŸ“„ License

This project is licensed under the MIT License. See the LICENSE file for details.

πŸ™Œ Contributing

Pull requests and issues are welcome! Feel free to suggest improvements or features.

Libraries

adaptive_grid
Support for doing something awesome.