Skip to content

Commit ddc1cdc

Browse files
author
fbchen
committed
optimize constraint set
1 parent fddbf7c commit ddc1cdc

File tree

4 files changed

+224
-188
lines changed

4 files changed

+224
-188
lines changed

‎README.md‎

Lines changed: 70 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -93,164 +93,151 @@ class ExampleState extends State<Example> {
9393
backgroundColor: Colors.black,
9494
body: ConstraintLayout(
9595
children: [
96-
Constrained(
96+
Container(
97+
color: Colors.redAccent,
98+
alignment: Alignment.center,
99+
child: const Text('box1'),
100+
).applyConstraint(
97101
id: box1,
98102
width: 200,
99103
height: 200,
100104
topRightTo: parent,
101-
child: Container(
102-
color: Colors.redAccent,
103-
alignment: Alignment.center,
104-
child: const Text('box1'),
105-
),
106105
),
107-
Constrained(
106+
Container(
107+
color: Colors.blue,
108+
alignment: Alignment.center,
109+
child: const Text('box2'),
110+
).applyConstraint(
108111
id: box2,
109112
width: matchConstraint,
110113
height: matchConstraint,
111114
centerHorizontalTo: box3,
112115
top: box3.bottom,
113116
bottom: parent.bottom,
114-
child: Container(
115-
color: Colors.blue,
116-
alignment: Alignment.center,
117-
child: const Text('box2'),
118-
),
119117
),
120-
Constrained(
118+
Container(
119+
color: Colors.orange,
120+
width: 200,
121+
height: 300,
122+
alignment: Alignment.center,
123+
child: const Text('box3'),
124+
).applyConstraint(
121125
id: box3,
122126
width: wrapContent,
123127
height: wrapContent,
124128
right: box1.left,
125129
top: box1.bottom,
126-
child: Container(
127-
color: Colors.orange,
128-
width: 200,
129-
height: 300,
130-
alignment: Alignment.center,
131-
child: const Text('box3'),
132-
),
133130
),
134-
Constrained(
131+
Container(
132+
color: Colors.redAccent,
133+
alignment: Alignment.center,
134+
child: const Text('box4'),
135+
).applyConstraint(
135136
id: box4,
136137
width: 50,
137138
height: 50,
138139
bottomRightTo: parent,
140+
),
141+
GestureDetector(
139142
child: Container(
140-
color: Colors.redAccent,
143+
color: Colors.pink,
141144
alignment: Alignment.center,
142-
child: const Text('box4'),
145+
child: const Text('box5 draggable'),
143146
),
144-
),
145-
Constrained(
147+
onPanUpdate: (details) {
148+
setState(() {
149+
x += details.delta.dx;
150+
y += details.delta.dy;
151+
});
152+
},
153+
).applyConstraint(
146154
id: box5,
147155
width: 120,
148156
height: 100,
149157
centerTo: parent,
150158
zIndex: 100,
151159
translate: Offset(x, y),
152160
translateConstraint: true,
153-
child: GestureDetector(
154-
child: Container(
155-
color: Colors.pink,
156-
alignment: Alignment.center,
157-
child: const Text('box5 draggable'),
158-
),
159-
onPanUpdate: (details) {
160-
setState(() {
161-
x += details.delta.dx;
162-
y += details.delta.dy;
163-
});
164-
},
165-
),
166161
),
167-
Constrained(
162+
Container(
163+
color: Colors.lightGreen,
164+
alignment: Alignment.center,
165+
child: const Text('box6'),
166+
).applyConstraint(
168167
id: box6,
169168
width: 120,
170169
height: 120,
171170
centerVerticalTo: box2,
172171
verticalBias: 0.8,
173172
left: box3.right,
174173
right: parent.right,
175-
child: Container(
176-
color: Colors.lightGreen,
177-
alignment: Alignment.center,
178-
child: const Text('box6'),
179-
),
180174
),
181-
Constrained(
175+
Container(
176+
color: Colors.lightGreen,
177+
alignment: Alignment.center,
178+
child: const Text('box7'),
179+
).applyConstraint(
182180
id: box7,
183181
width: matchConstraint,
184182
height: matchConstraint,
185183
left: parent.left,
186184
right: box3.left,
187185
centerVerticalTo: parent,
188186
margin: const EdgeInsets.all(50),
189-
child: Container(
190-
color: Colors.lightGreen,
191-
alignment: Alignment.center,
192-
child: const Text('box7'),
193-
),
194187
),
195-
Constrained(
188+
Container(
189+
color: Colors.cyan,
190+
alignment: Alignment.center,
191+
child: const Text('child[7] pinned to the top right'),
192+
).applyConstraint(
196193
width: 200,
197194
height: 100,
198195
left: box5.right,
199196
bottom: box5.top,
200-
child: Container(
201-
color: Colors.cyan,
202-
alignment: Alignment.center,
203-
child: const Text('child[7] pinned to the top right'),
204-
),
205197
),
206-
Constrained(
198+
const Text(
199+
'box9 baseline to box7',
200+
style: TextStyle(
201+
color: Colors.white,
202+
),
203+
).applyConstraint(
207204
id: box9,
208205
width: wrapContent,
209206
height: wrapContent,
210207
baseline: box7.baseline,
211-
212-
/// when setting baseline alignment, height must be wrap_content or fixed size
213-
/// other vertical constraints will be ignored
214-
/// Warning:
215-
/// Due to a bug in the flutter framework, baseline alignment may not take effect in debug mode
216-
/// See https://github.com/flutter/flutter/issues/101179
217-
218208
left: box7.left,
219-
child: const Text(
220-
'box9 baseline to box7',
221-
style: TextStyle(
222-
color: Colors.white,
223-
),
224-
),
225209
),
226210
...hChain(
227211
centerHorizontalTo: parent,
228212
hChainList: [
229-
Constrained(
213+
Container(
214+
color: Colors.redAccent,
215+
alignment: Alignment.center,
216+
child: const Text('chain item 1'),
217+
).applyConstraint(
230218
id: box10,
231219
width: matchConstraint,
232220
height: 200,
233221
top: parent.top,
234-
child: Container(
235-
color: Colors.redAccent,
236-
alignment: Alignment.center,
237-
child: const Text('chain item 1'),
238-
),
239222
),
240-
Constrained(
223+
Container(
224+
color: Colors.redAccent,
225+
alignment: Alignment.center,
226+
child: const Text('chain item 2'),
227+
).applyConstraint(
241228
id: box11,
242229
width: matchConstraint,
243230
height: 200,
244231
top: parent.top,
245-
child: Container(
246-
color: Colors.redAccent,
247-
alignment: Alignment.center,
248-
child: const Text('chain item 2'),
249-
),
250232
),
251233
],
252234
),
253-
Constrained(
235+
Container(
236+
color: Colors.yellow,
237+
alignment: Alignment.bottomCenter,
238+
child: const Text(
239+
'percentage layout, width: 50% of parent, height: 30% of parent'),
240+
).applyConstraint(
254241
width: matchConstraint,
255242
height: matchConstraint,
256243
widthPercent: 0.5,
@@ -259,12 +246,6 @@ class ExampleState extends State<Example> {
259246
verticalBias: 0,
260247
centerTo: parent,
261248
zIndex: 6,
262-
child: Container(
263-
color: Colors.yellow,
264-
alignment: Alignment.bottomCenter,
265-
child: const Text(
266-
'percentage layout, width: 50% of parent, height: 30% of parent'),
267-
),
268249
),
269250
],
270251
),

‎effect.gif‎

9.05 KB
Loading

‎lib/constrait_layout/constraint_layout.dart‎

Lines changed: 84 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,79 @@ List<Constrained> vChain({
128128
const Object _wrapperConstraint = Object();
129129
const Object _baseConstraint = Object();
130130

131+
extension WidgetsExt on Widget {
132+
Constrained applyConstraint({
133+
Key? key,
134+
ConstraintId? id,
135+
required double width,
136+
required double height,
137+
@_baseConstraint _Constraint? left,
138+
@_baseConstraint _Constraint? top,
139+
@_baseConstraint _Constraint? right,
140+
@_baseConstraint _Constraint? bottom,
141+
@_baseConstraint _Constraint? baseline,
142+
EdgeInsets clickPadding = EdgeInsets.zero,
143+
CLVisibility visibility = visible,
144+
EdgeInsets margin = EdgeInsets.zero,
145+
EdgeInsets goneMargin = EdgeInsets.zero,
146+
TextBaseline textBaseline = TextBaseline.alphabetic,
147+
int? zIndex, // default is child index
148+
Offset translate = Offset.zero,
149+
bool translateConstraint = false,
150+
double widthPercent = 1,
151+
double heightPercent = 1,
152+
double horizontalBias = 0.5,
153+
double verticalBias = 0.5,
154+
@_wrapperConstraint ConstraintId? topLeftTo,
155+
@_wrapperConstraint ConstraintId? topCenterTo,
156+
@_wrapperConstraint ConstraintId? topRightTo,
157+
@_wrapperConstraint ConstraintId? centerLeftTo,
158+
@_wrapperConstraint ConstraintId? centerTo,
159+
@_wrapperConstraint ConstraintId? centerRightTo,
160+
@_wrapperConstraint ConstraintId? bottomLeftTo,
161+
@_wrapperConstraint ConstraintId? bottomCenterTo,
162+
@_wrapperConstraint ConstraintId? bottomRightTo,
163+
@_wrapperConstraint ConstraintId? centerHorizontalTo,
164+
@_wrapperConstraint ConstraintId? centerVerticalTo,
165+
}) {
166+
return Constrained(
167+
key: key,
168+
id: id,
169+
width: width,
170+
height: height,
171+
left: left,
172+
top: top,
173+
right: right,
174+
bottom: bottom,
175+
baseline: baseline,
176+
clickPadding: clickPadding,
177+
visibility: visibility,
178+
margin: margin,
179+
goneMargin: goneMargin,
180+
textBaseline: textBaseline,
181+
zIndex: zIndex,
182+
translate: translate,
183+
translateConstraint: translateConstraint,
184+
widthPercent: widthPercent,
185+
heightPercent: heightPercent,
186+
horizontalBias: horizontalBias,
187+
verticalBias: verticalBias,
188+
topLeftTo: topLeftTo,
189+
topCenterTo: topCenterTo,
190+
topRightTo: topRightTo,
191+
centerLeftTo: centerLeftTo,
192+
centerTo: centerTo,
193+
centerRightTo: centerRightTo,
194+
bottomLeftTo: bottomLeftTo,
195+
bottomCenterTo: bottomCenterTo,
196+
bottomRightTo: bottomRightTo,
197+
centerHorizontalTo: centerHorizontalTo,
198+
centerVerticalTo: centerVerticalTo,
199+
child: this,
200+
);
201+
}
202+
}
203+
131204
bool _debugEnsureNotEmptyString(String name, String? value) {
132205
if (value != null && value.trim().isEmpty) {
133206
throw ConstraintLayoutException(
@@ -791,6 +864,17 @@ class _ConstraintRenderBox extends RenderBox
791864
while (child != null) {
792865
_ConstraintBoxData childParentData =
793866
child.parentData as _ConstraintBoxData;
867+
868+
assert(() {
869+
if (_debugCheckConstraints) {
870+
if (childParentData.width == null) {
871+
throw ConstraintLayoutException(
872+
'Child elements must be wrapped with Constrained.');
873+
}
874+
}
875+
return true;
876+
}());
877+
794878
if (childParentData.id != null) {
795879
if (!idSet.add(childParentData.id!)) {
796880
throw ConstraintLayoutException('Duplicate id in ConstraintLayout.');
@@ -903,16 +987,6 @@ class _ConstraintRenderBox extends RenderBox
903987
_ConstraintBoxData childParentData =
904988
child.parentData as _ConstraintBoxData;
905989

906-
assert(() {
907-
if (_debugCheckConstraints) {
908-
if (childParentData.width == null) {
909-
throw ConstraintLayoutException(
910-
'Child elements must be wrapped with Constrained.');
911-
}
912-
}
913-
return true;
914-
}());
915-
916990
_ConstrainedNode currentNode = _getConstrainedNodeForChild(
917991
child,
918992
childParentData.id ??

0 commit comments

Comments
 (0)