Flex Grid View
A Flutter package that provides a flexible grid widget that arranges its children based on a provided pattern.
Show some ❤️ and star the repo to support the project
Features
- 🧩 Create grid layouts with flexible sizing for each cell
- 📐 Configure the grid with custom pattern matrix where each cell can have different flex values
- 📏 Customize row heights with run patterns
- 🔢 Option to limit the number of displayed children
- 💫 Show remaining items count with a customizable overlay
- 🔄 Reversible direction for either rows or columns as the primary direction
Installation
Add the following to your pubspec.yaml and replace [version] with the latest version:
dependencies:
flex_grid_view: ^[version]
Usage
To get started, import the package:
import 'package:flex_grid_view/flex_grid_view.dart';
Basic grid with equal cells
FlexGrid(
pattern: const [
[1, 1],
[1, 1],
],
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
Container(color: Colors.yellow),
],
)
With cells of different sizes
FlexGrid(
pattern: const [
[2, 1], // First row: first cell is twice as wide as second cell
[1, 3], // Second row: second cell is three times as wide as first cell
],
children: [
Container(color: Colors.red), // 2/3 of first row width
Container(color: Colors.blue), // 1/3 of first row width
Container(color: Colors.green), // 1/4 of second row width
Container(color: Colors.yellow), // 3/4 of second row width
],
)
With custom row heights
FlexGrid(
pattern: const [
[1, 1],
[1, 1],
],
runPattern: const [3, 1], // First row has 3x height of second row
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
Container(color: Colors.yellow),
],
)
With maximum children limit
FlexGrid(
pattern: const [
[1, 1],
[1, 1],
],
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
Container(color: Colors.yellow),
Container(color: Colors.purple),
Container(color: Colors.orange),
],
maxChildren: 4,
overlayBuilder: (context, remaining) => Center(
child: Text('+$remaining', style: TextStyle(color: Colors.white)),
),
)