flex_grid_layout 1.0.0 copy "flex_grid_layout: ^1.0.0" to clipboard
flex_grid_layout: ^1.0.0 copied to clipboard

Responsive grid that automatically adjusts its items based on available width.

FlexGridLayout #

A responsive grid layout widget for Flutter that automatically arranges items based on available width.

pub package style: flutter lints

)

Features #

  • ๐Ÿ”„ Responsive grid that adapts to screen size
  • ๐Ÿ“ฑ Automatic column adjustment based on available width
  • ๐Ÿ“ Customizable minimum item width and height
  • ๐ŸŽฏ Control over maximum items per row
  • ๐ŸŒŸ Flexible spacing between items and rows
  • ๐Ÿ“œ Built-in scrolling support

flex_grid_layout

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flex_grid_layout: ^1.0.0

Usage #

Simple example:

FlexGridLayout(
  children: [
    Card(child: Text('Item 1')),
    Card(child: Text('Item 2')),
    Card(child: Text('Item 3')),
  ],
)

Customized example:

FlexGridLayout(
  children: items,
  minItemWidth: 300,
  maxItemsPerRow: 3,
  spacing: 16,
  runSpacing: 16,
  minItemHeight: 200,
)

Parameters #

Parameter Type Default Description
children List required The widgets to display in the grid
spacing double 8.0 Horizontal space between items
runSpacing double 8.0 Vertical space between rows
maxItemsPerRow int 3 Maximum number of items in a row
minItemWidth double 470.0 Minimum width for each item
minItemHeight double? null Optional minimum height for each item

๐ŸŽฏ Examples #

Basic Grid #

FlexGridLayout(
  children: List.generate(
    9,
    (index) => Card(
      child: Center(
        child: Text('Item $index'),
      ),
    ),
  ),
)

Dashboard Layout #

FlexGridLayout(
  minItemWidth: 350,
  maxItemsPerRow: 3,
  spacing: 16,
  runSpacing: 16,
  children: [
    DashboardCard(
      title: 'Sales',
      value: '\$15,350',
    ),
    DashboardCard(
      title: 'Users',
      value: '2,350',
    ),
    DashboardCard(
      title: 'Revenue',
      value: '\$50,350',
    ),
  ],
)

๐Ÿงช Testing #

Run the test suite:

flutter test

๐Ÿ“ License #

MIT License - see the LICENSE file for details

๐Ÿค Contributing #

Contributions, issues, and feature requests are welcome!.

โญ๏ธ Show your support #

Give a โญ๏ธ if this project helped you!


Made with โค๏ธ by Jhonacode

2
likes
140
points
27
downloads

Publisher

verified publisherjhonacode.com

Weekly Downloads

Responsive grid that automatically adjusts its items based on available width.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flex_grid_layout