flutter_grid_layout

Description:

flutter grid layout

Grid Layout (CSS) for Flutter #




Embracing a grid layout is essential for creating adaptable and user-friendly digital designs. Grids ensure visual consistency, prioritize content, and seamlessly adapt to various screen sizes, enhancing the overall user experience across devices and displays.
Features #

Basic implementation of CSS Grid.

Getting started #
https://pub.dev/packages/flutter_grid_layout
flutter pub add flutter_grid_layout
copied to clipboard
Simple Sample #
GridContainer(
columns: [0.2, null, 0.2],
rows: [0.2, null, 0.2],
children: [
GridItem(
start: const Size(1, 1),
end: const Size(2, 2),
child: Container(color: Colors.red),
)
],
),
copied to clipboard

Multiple Items with different layers #
GridContainer(
columns: [0.2, 0.3, 0.3, 0.2],
rows: [0.2, 0.3, 0.3, 0.2],
children: [
GridItem(
start: const Size(0, 0),
end: const Size(4, 1),
child: Container(color: Colors.red),
),
GridItem(
start: const Size(1, 0),
end: const Size(3, 4),
order: 1,
child: Container(color: Colors.blue.withOpacity(0.5)),
),
GridItem(
start: const Size(2, 3),
end: const Size(4, 4),
child: Container(color: Colors.green),
),
],
),
copied to clipboard

Reversed Multiple Items with different layers #
GridContainer(
alignment: MainAxisAlignment.end,
columns: [0.2, 0.3, 0.3, 0.2],
rows: [0.2, 0.3, 0.3, 0.2],
children: [
GridItem(
start: const Size(0, 0),
end: const Size(4, 1),
child: Container(color: Colors.red),
),
GridItem(
start: const Size(1, 0),
end: const Size(3, 4),
order: 1,
child: Container(color: Colors.blue.withOpacity(0.5)),
),
GridItem(
start: const Size(2, 3),
end: const Size(4, 4),
child: Container(color: Colors.green),
),
],
),
copied to clipboard

In addition to thanking, you may treat us to ☕.