support grid

Author: hackw

README.md

@@ -57,6 +57,7 @@ insult him.
 13. dimension ratio
 14. relative id
 15. wrapper constraints
+16. grid
 
 Coming soon:
 
@@ -495,6 +496,54 @@ class BadgeExample extends StatelessWidget {
 
 ![badge.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/badge.webp?raw=true)
 
+4. grid
+
+```dart
+class GridExample extends StatelessWidget {
+  const GridExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<Color> colors = [
+      Colors.redAccent,
+      Colors.greenAccent,
+      Colors.blueAccent,
+      Colors.orangeAccent,
+      Colors.yellow,
+      Colors.pink,
+      Colors.lightBlueAccent
+    ];
+    return Scaffold(
+      body: ConstraintLayout(
+        children: [
+          ...constraintGrid(
+              id: ConstraintId('grid'),
+              left: parent.left,
+              top: parent.top,
+              itemCount: 50,
+              columnCount: 8,
+              itemWidth: 50,
+              itemHeight: 50,
+              itemBuilder: (index) {
+                return Container(
+                  color: colors[index % colors.length],
+                );
+              },
+              itemMarginBuilder: (index) {
+                return const EdgeInsets.only(
+                  left: 10,
+                  top: 10,
+                );
+              })
+        ],
+      ),
+    );
+  }
+}
+```
+
+![grid.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/grid.webp?raw=true)
+
 # Performance optimization
 
 1. When the layout is complex, if the child elements need to be repainted frequently, it is

example/grid.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class GridExample extends StatelessWidget {
+  const GridExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<Color> colors = [
+      Colors.redAccent,
+      Colors.greenAccent,
+      Colors.blueAccent,
+      Colors.orangeAccent,
+      Colors.yellow,
+      Colors.pink,
+      Colors.lightBlueAccent
+    ];
+    return Scaffold(
+      appBar: const CustomAppBar(
+        title: 'Grid',
+        codePath: 'example/grid.dart',
+      ),
+      body: ConstraintLayout(
+        children: [
+          ...constraintGrid(
+              id: ConstraintId('grid'),
+              left: parent.left,
+              top: parent.top,
+              itemCount: 50,
+              columnCount: 8,
+              itemWidth: 100,
+              itemHeight: 100,
+              itemBuilder: (index) {
+                return Container(
+                  color: colors[index % colors.length],
+                );
+              },
+              itemMarginBuilder: (index) {
+                return const EdgeInsets.only(
+                  left: 10,
+                  top: 10,
+                );
+              })
+        ],
+      ),
+    );
+  }
+}

example/home.dart

@@ -4,6 +4,7 @@ import 'badge.dart';
 import 'barrier.dart';
 import 'complex_list.dart';
 import 'dimension_ratio.dart';
+import 'grid.dart';
 import 'guideline.dart';
 import 'percentage_layout.dart';
 import 'relative_id.dart';
@@ -56,6 +57,9 @@ class ExampleHome extends StatelessWidget {
           button('Wrapper Constraints', () {
             push(context, const WrapperConstraintsExample());
           }),
+          button('Grid', () {
+            push(context, const GridExample());
+          }),
           button('Chain (Coming soon)', null),
           const Spacer(),
           const Text(

grid.webp

@@ -74,6 +74,47 @@ class ConstraintLayout extends MultiChildRenderObjectWidget {
   }
 }
 
+List<Widget> constraintGrid({
+  required ConstraintId id,
+  required _Align left,
+  required _Align top,
+  required int itemCount,
+  required int columnCount,
+  required double itemWidth,
+  required double itemHeight,
+  required Widget Function(int index) itemBuilder,
+  EdgeInsets Function(int index)? itemMarginBuilder,
+}) {
+  assert(itemCount > 0);
+  assert(columnCount > 0);
+  assert(itemWidth > 0);
+  assert(itemHeight > 0);
+  List<Widget> widgets = [];
+  _Align leftAnchor = left;
+  _Align topAnchor = top;
+  for (int i = 0; i < itemCount; i++) {
+    ConstraintId itemId = ConstraintId(id.id + '_grid_item_$i');
+    Widget widget = itemBuilder(i);
+    widgets.add(Constrained(
+      child: widget,
+      constraint: Constraint(
+        id: itemId,
+        width: itemWidth,
+        height: itemHeight,
+        left: leftAnchor,
+        top: topAnchor,
+        margin: itemMarginBuilder?.call(i) ?? EdgeInsets.zero,
+      ),
+    ));
+    leftAnchor = itemId.right;
+    if (i % columnCount == columnCount - 1) {
+      leftAnchor = left;
+      topAnchor = itemId.bottom;
+    }
+  }
+  return widgets;
+}
+
 /// Not completed
 List<Widget> horizontalChain({
   required _Align left,

lib/src/constraint_layout.dart

@@ -30,4 +30,5 @@ flutter:
     - example/percentage_layout.dart
     - example/dimension_ratio.dart
     - example/relative_id.dart
-    - example/wrapper_constraints.dart
+    - example/wrapper_constraints.dart
+    - example/grid.dart