enhance grid

Author: fbchen

README.md

@@ -57,7 +57,7 @@ insult him.
 13. dimension ratio
 14. relative id
 15. wrapper constraints
-16. grid、list(list is a special grid with 1 column)
+16. grid、list(list is a special grid)
 
 Coming soon:
 

example/home.dart

@@ -6,9 +6,11 @@ import 'complex_list.dart';
 import 'dimension_ratio.dart';
 import 'grid.dart';
 import 'guideline.dart';
+import 'horizontal_list.dart';
 import 'percentage_layout.dart';
 import 'relative_id.dart';
 import 'summary.dart';
+import 'vertical_list.dart';
 import 'wrapper_constraints.dart';
 
 class ExampleHome extends StatelessWidget {
@@ -60,6 +62,12 @@ class ExampleHome extends StatelessWidget {
           button('Grid', () {
             push(context, const GridExample());
           }),
+          button('Horizontal List', () {
+            push(context, const HorizontalListExample());
+          }),
+          button('Vertical List', () {
+            push(context, const VerticalListExample());
+          }),
           button('Chain (Coming soon)', null),
           const Spacer(),
           const Text(

example/horizontal_list.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class HorizontalListExample extends StatelessWidget {
+  const HorizontalListExample({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: 'Horizontal List',
+        codePath: 'example/horizontal_list.dart',
+      ),
+      body: ConstraintLayout(
+        children: [
+          ...constraintGrid(
+              id: ConstraintId('horizontalList'),
+              left: parent.left,
+              top: parent.top,
+              margin: const EdgeInsets.only(
+                left: 100,
+                top: 100,
+              ),
+              itemCount: 10,
+              columnCount: 10,
+              itemWidth: wrapContent,
+              itemHeight: 100,
+              itemBuilder: (index) {
+                return Container(
+                  color: colors[index % colors.length],
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 10,
+                  ),
+                  child: Text('child $index'),
+                );
+              },
+              itemMarginBuilder: (index) {
+                return const EdgeInsets.only(
+                  left: 10,
+                  top: 10,
+                );
+              })
+        ],
+      ),
+    );
+  }
+}

example/vertical_list.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_constraintlayout/src/constraint_layout.dart';
+
+import 'custom_app_bar.dart';
+
+class VerticalListExample extends StatelessWidget {
+  const VerticalListExample({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: 'Vertical List',
+        codePath: 'example/vertical_list.dart',
+      ),
+      body: ConstraintLayout(
+        children: [
+          ...constraintGrid(
+              id: ConstraintId('verticalList'),
+              left: parent.left,
+              top: parent.top,
+              margin: const EdgeInsets.only(
+                left: 100,
+                top: 100,
+              ),
+              itemCount: 20,
+              columnCount: 1,
+              itemBuilder: (index) {
+                return Container(
+                  color: colors[index % colors.length],
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 10,
+                  ),
+                  child: Text('child $index'),
+                );
+              },
+              itemSizeBuilder: (index) {
+                return const Size(100, wrapContent);
+              },
+              itemMarginBuilder: (index) {
+                return const EdgeInsets.only(
+                  left: 10,
+                  top: 10,
+                );
+              })
+        ],
+      ),
+    );
+  }
+}

lib/src/constraint_layout.dart

@@ -80,30 +80,60 @@ List<Widget> constraintGrid({
   required _Align top,
   required int itemCount,
   required int columnCount,
-  required double itemWidth,
-  required double itemHeight,
+  double? itemWidth,
+  double? itemHeight,
+  Size Function(int index)? itemSizeBuilder,
   required Widget Function(int index) itemBuilder,
   EdgeInsets Function(int index)? itemMarginBuilder,
+  EdgeInsets margin = EdgeInsets.zero,
 }) {
   assert(itemCount > 0);
   assert(columnCount > 0);
-  assert(itemWidth > 0);
-  assert(itemHeight > 0);
+  assert(itemWidth == null || (itemWidth > 0 || itemWidth == wrapContent));
+  assert(itemHeight == null || (itemHeight > 0 || itemHeight == wrapContent));
+  assert((itemSizeBuilder == null && itemWidth != null && itemHeight != null) ||
+      (itemSizeBuilder != null && itemWidth == null && itemHeight == null));
   List<Widget> widgets = [];
   _Align leftAnchor = left;
   _Align topAnchor = top;
+
+  EdgeInsets leftMargin = EdgeInsets.only(
+    left: margin.left,
+  );
+  EdgeInsets topMargin = EdgeInsets.only(
+    top: margin.top,
+  );
+  EdgeInsets calculateItemMargin(
+    int index,
+    int columnCount,
+    EdgeInsets margin,
+  ) {
+    /// First row
+    if (index < columnCount) {
+      margin = margin.add(topMargin) as EdgeInsets;
+    }
+
+    /// First column
+    if (index % columnCount == 0) {
+      margin = margin.add(leftMargin) as EdgeInsets;
+    }
+    return margin;
+  }
+
   for (int i = 0; i < itemCount; i++) {
     ConstraintId itemId = ConstraintId(id.id + '_grid_item_$i');
     Widget widget = itemBuilder(i);
+    Size? itemSize = itemSizeBuilder?.call(i);
     widgets.add(Constrained(
       child: widget,
       constraint: Constraint(
         id: itemId,
-        width: itemWidth,
-        height: itemHeight,
+        width: itemWidth ?? itemSize!.width,
+        height: itemHeight ?? itemSize!.height,
         left: leftAnchor,
         top: topAnchor,
-        margin: itemMarginBuilder?.call(i) ?? EdgeInsets.zero,
+        margin: calculateItemMargin(
+            i, columnCount, itemMarginBuilder?.call(i) ?? EdgeInsets.zero),
       ),
     ));
     leftAnchor = itemId.right;

pubspec.yaml

@@ -31,4 +31,6 @@ flutter:
     - example/dimension_ratio.dart
     - example/relative_id.dart
     - example/wrapper_constraints.dart
-    - example/grid.dart
+    - example/grid.dart
+    - example/horizontal_list.dart
+    - example/vertical_list.dart