flex_grid_view 0.1.0

A Flutter package that provides a flexible grid widget that arranges its children based on a provided pattern.

FlexGridView

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)),
  ),
)

Parameters

Parameter	Description	Default
pattern	Matrix representing the flex values for each cell	Required
children	List of widgets to display in the grid	Required
runPattern	List of flex factors for row heights	null
reverse	Whether to reverse the primary direction of the grid	false
maxChildren	Maximum number of children to display	null
overlayBuilder	Builder for overlay on last child when exceeding maxChildren	null
spacing	Space between children in the main axis	2.0
runSpacing	Space between runs in the cross axis	2.0

License

MIT License