Skip to content

Commit 11dd3e2

Browse files
author
fbchen
committed
enhance grid
1 parent e1ecaa1 commit 11dd3e2

File tree

6 files changed

+166
-9
lines changed

6 files changed

+166
-9
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ insult him.
5757
13. dimension ratio
5858
14. relative id
5959
15. wrapper constraints
60-
16. grid、list(list is a special grid with 1 column)
60+
16. grid、list(list is a special grid)
6161

6262
Coming soon:
6363

‎example/home.dart

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import 'complex_list.dart';
66
import 'dimension_ratio.dart';
77
import 'grid.dart';
88
import 'guideline.dart';
9+
import 'horizontal_list.dart';
910
import 'percentage_layout.dart';
1011
import 'relative_id.dart';
1112
import 'summary.dart';
13+
import 'vertical_list.dart';
1214
import 'wrapper_constraints.dart';
1315

1416
class ExampleHome extends StatelessWidget {
@@ -60,6 +62,12 @@ class ExampleHome extends StatelessWidget {
6062
button('Grid', () {
6163
push(context, const GridExample());
6264
}),
65+
button('Horizontal List', () {
66+
push(context, const HorizontalListExample());
67+
}),
68+
button('Vertical List', () {
69+
push(context, const VerticalListExample());
70+
}),
6371
button('Chain (Coming soon)', null),
6472
const Spacer(),
6573
const Text(

‎example/horizontal_list.dart

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
3+
4+
import 'custom_app_bar.dart';
5+
6+
class HorizontalListExample extends StatelessWidget {
7+
const HorizontalListExample({Key? key}) : super(key: key);
8+
9+
@override
10+
Widget build(BuildContext context) {
11+
List<Color> colors = [
12+
Colors.redAccent,
13+
Colors.greenAccent,
14+
Colors.blueAccent,
15+
Colors.orangeAccent,
16+
Colors.yellow,
17+
Colors.pink,
18+
Colors.lightBlueAccent
19+
];
20+
return Scaffold(
21+
appBar: const CustomAppBar(
22+
title: 'Horizontal List',
23+
codePath: 'example/horizontal_list.dart',
24+
),
25+
body: ConstraintLayout(
26+
children: [
27+
...constraintGrid(
28+
id: ConstraintId('horizontalList'),
29+
left: parent.left,
30+
top: parent.top,
31+
margin: const EdgeInsets.only(
32+
left: 100,
33+
top: 100,
34+
),
35+
itemCount: 10,
36+
columnCount: 10,
37+
itemWidth: wrapContent,
38+
itemHeight: 100,
39+
itemBuilder: (index) {
40+
return Container(
41+
color: colors[index % colors.length],
42+
padding: const EdgeInsets.symmetric(
43+
horizontal: 10,
44+
),
45+
child: Text('child $index'),
46+
);
47+
},
48+
itemMarginBuilder: (index) {
49+
return const EdgeInsets.only(
50+
left: 10,
51+
top: 10,
52+
);
53+
})
54+
],
55+
),
56+
);
57+
}
58+
}

‎example/vertical_list.dart

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
3+
4+
import 'custom_app_bar.dart';
5+
6+
class VerticalListExample extends StatelessWidget {
7+
const VerticalListExample({Key? key}) : super(key: key);
8+
9+
@override
10+
Widget build(BuildContext context) {
11+
List<Color> colors = [
12+
Colors.redAccent,
13+
Colors.greenAccent,
14+
Colors.blueAccent,
15+
Colors.orangeAccent,
16+
Colors.yellow,
17+
Colors.pink,
18+
Colors.lightBlueAccent
19+
];
20+
return Scaffold(
21+
appBar: const CustomAppBar(
22+
title: 'Vertical List',
23+
codePath: 'example/vertical_list.dart',
24+
),
25+
body: ConstraintLayout(
26+
children: [
27+
...constraintGrid(
28+
id: ConstraintId('verticalList'),
29+
left: parent.left,
30+
top: parent.top,
31+
margin: const EdgeInsets.only(
32+
left: 100,
33+
top: 100,
34+
),
35+
itemCount: 20,
36+
columnCount: 1,
37+
itemBuilder: (index) {
38+
return Container(
39+
color: colors[index % colors.length],
40+
padding: const EdgeInsets.symmetric(
41+
horizontal: 10,
42+
),
43+
child: Text('child $index'),
44+
);
45+
},
46+
itemSizeBuilder: (index) {
47+
return const Size(100, wrapContent);
48+
},
49+
itemMarginBuilder: (index) {
50+
return const EdgeInsets.only(
51+
left: 10,
52+
top: 10,
53+
);
54+
})
55+
],
56+
),
57+
);
58+
}
59+
}

‎lib/src/constraint_layout.dart

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -80,30 +80,60 @@ List<Widget> constraintGrid({
8080
required _Align top,
8181
required int itemCount,
8282
required int columnCount,
83-
required double itemWidth,
84-
required double itemHeight,
83+
double? itemWidth,
84+
double? itemHeight,
85+
Size Function(int index)? itemSizeBuilder,
8586
required Widget Function(int index) itemBuilder,
8687
EdgeInsets Function(int index)? itemMarginBuilder,
88+
EdgeInsets margin = EdgeInsets.zero,
8789
}) {
8890
assert(itemCount > 0);
8991
assert(columnCount > 0);
90-
assert(itemWidth > 0);
91-
assert(itemHeight > 0);
92+
assert(itemWidth == null || (itemWidth > 0 || itemWidth == wrapContent));
93+
assert(itemHeight == null || (itemHeight > 0 || itemHeight == wrapContent));
94+
assert((itemSizeBuilder == null && itemWidth != null && itemHeight != null) ||
95+
(itemSizeBuilder != null && itemWidth == null && itemHeight == null));
9296
List<Widget> widgets = [];
9397
_Align leftAnchor = left;
9498
_Align topAnchor = top;
99+
100+
EdgeInsets leftMargin = EdgeInsets.only(
101+
left: margin.left,
102+
);
103+
EdgeInsets topMargin = EdgeInsets.only(
104+
top: margin.top,
105+
);
106+
EdgeInsets calculateItemMargin(
107+
int index,
108+
int columnCount,
109+
EdgeInsets margin,
110+
) {
111+
/// First row
112+
if (index < columnCount) {
113+
margin = margin.add(topMargin) as EdgeInsets;
114+
}
115+
116+
/// First column
117+
if (index % columnCount == 0) {
118+
margin = margin.add(leftMargin) as EdgeInsets;
119+
}
120+
return margin;
121+
}
122+
95123
for (int i = 0; i < itemCount; i++) {
96124
ConstraintId itemId = ConstraintId(id.id + '_grid_item_$i');
97125
Widget widget = itemBuilder(i);
126+
Size? itemSize = itemSizeBuilder?.call(i);
98127
widgets.add(Constrained(
99128
child: widget,
100129
constraint: Constraint(
101130
id: itemId,
102-
width: itemWidth,
103-
height: itemHeight,
131+
width: itemWidth ?? itemSize!.width,
132+
height: itemHeight ?? itemSize!.height,
104133
left: leftAnchor,
105134
top: topAnchor,
106-
margin: itemMarginBuilder?.call(i) ?? EdgeInsets.zero,
135+
margin: calculateItemMargin(
136+
i, columnCount, itemMarginBuilder?.call(i) ?? EdgeInsets.zero),
107137
),
108138
));
109139
leftAnchor = itemId.right;

‎pubspec.yaml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,6 @@ flutter:
3131
- example/dimension_ratio.dart
3232
- example/relative_id.dart
3333
- example/wrapper_constraints.dart
34-
- example/grid.dart
34+
- example/grid.dart
35+
- example/horizontal_list.dart
36+
- example/vertical_list.dart

0 commit comments

Comments
 (0)