Skip to content

Commit 9eeb64d

Browse files
author
fbchen
committed
add guideline usage
1 parent 75d9639 commit 9eeb64d

File tree

3 files changed

+84
-174
lines changed

3 files changed

+84
-174
lines changed

‎README.md‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ Coming soon:
3535
1. barrier
3636
2. constraints visualization
3737
3. chain
38-
4. more...
38+
4. dimension ratio
39+
5. more...
3940

4041
Support platform:
4142

@@ -279,6 +280,67 @@ class ExampleState extends State<Example> {
279280

280281
![example.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/effect.gif?raw=true)
281282

283+
# Advanced usage
284+
285+
1. guideline
286+
287+
```dart
288+
class ExampleState extends State<Example> {
289+
ConstraintId left = ConstraintId();
290+
ConstraintId right = ConstraintId();
291+
ConstraintId guideline = ConstraintId();
292+
293+
@override
294+
Widget build(BuildContext context) {
295+
return MaterialApp(
296+
home: Scaffold(
297+
body: ConstraintLayout(
298+
children: [
299+
Container(
300+
color: const Color(0xFF005BBB),
301+
).applyConstraint(
302+
id: left,
303+
width: matchParent,
304+
height: matchConstraint,
305+
top: parent.top,
306+
bottom: guideline.top,
307+
),
308+
Guideline(
309+
id: guideline,
310+
horizontal: true,
311+
guidelinePercent: 0.5,
312+
),
313+
Container(
314+
color: const Color(0xFFFFD500),
315+
).applyConstraint(
316+
id: right,
317+
width: matchParent,
318+
height: matchConstraint,
319+
top: guideline.bottom,
320+
bottom: parent.bottom,
321+
),
322+
const Text(
323+
'Stand with the people of Ukraine',
324+
style: TextStyle(
325+
fontSize: 40,
326+
color: Colors.white,
327+
),
328+
).applyConstraint(
329+
width: wrapContent,
330+
height: wrapContent,
331+
centerHorizontalTo: parent,
332+
bottom: guideline.bottom,
333+
)
334+
],
335+
),
336+
),
337+
);
338+
}
339+
}
340+
```
341+
342+
![guideline.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/guideline.webp?raw=true)
343+
282344
# Support me
283345

284346
If it helps you a lot, consider sponsoring me a cup of milk tea.

‎guideline.webp‎

3.49 KB
Loading

‎lib/example.dart‎

Lines changed: 21 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -9,203 +9,51 @@ class Example extends StatefulWidget {
99
}
1010

1111
class ExampleState extends State<Example> {
12-
double x = 0;
13-
double y = 0;
14-
15-
ConstraintId box0 = ConstraintId();
16-
ConstraintId box1 = ConstraintId();
17-
ConstraintId box2 = ConstraintId();
18-
ConstraintId box3 = ConstraintId();
19-
ConstraintId box4 = ConstraintId();
20-
ConstraintId box5 = ConstraintId();
21-
ConstraintId box6 = ConstraintId();
22-
ConstraintId box7 = ConstraintId();
23-
ConstraintId box8 = ConstraintId();
24-
ConstraintId box9 = ConstraintId();
25-
ConstraintId box10 = ConstraintId();
26-
ConstraintId box11 = ConstraintId();
12+
ConstraintId left = ConstraintId();
13+
ConstraintId right = ConstraintId();
14+
ConstraintId guideline = ConstraintId();
2715

2816
@override
2917
Widget build(BuildContext context) {
3018
return MaterialApp(
3119
home: Scaffold(
32-
backgroundColor: Colors.black,
3320
body: ConstraintLayout(
34-
// Constraints can be separated from widgets
35-
childConstraints: [
36-
Constraint(
37-
id: box0,
38-
width: 200,
39-
height: 200,
40-
bottomLeftTo: parent,
41-
zIndex: 20,
42-
)
43-
],
4421
children: [
4522
Container(
46-
color: Colors.redAccent,
47-
alignment: Alignment.center,
48-
child: const Text('box0'),
49-
).applyConstraintId(
50-
id: box0, // Constraints can be separated from widgets
51-
),
52-
Container(
53-
color: Colors.redAccent,
54-
alignment: Alignment.center,
55-
child: const Text('box1'),
56-
).apply(
57-
constraint: Constraint(
58-
// Constraints set with widgets
59-
id: box1,
60-
width: 200,
61-
height: 100,
62-
topRightTo: parent,
63-
),
64-
),
65-
Container(
66-
color: Colors.blue,
67-
alignment: Alignment.center,
68-
child: const Text('box2'),
23+
color: const Color(0xFF005BBB),
6924
).applyConstraint(
70-
// Constraints set with widgets easy way
71-
id: box2,
72-
width: matchConstraint,
25+
id: left,
26+
width: matchParent,
7327
height: matchConstraint,
74-
centerHorizontalTo: box3,
75-
top: box3.bottom,
76-
bottom: parent.bottom,
28+
top: parent.top,
29+
bottom: guideline.top,
7730
),
78-
Container(
79-
color: Colors.orange,
80-
width: 200,
81-
height: 150,
82-
alignment: Alignment.center,
83-
child: const Text('box3'),
84-
).applyConstraint(
85-
id: box3,
86-
width: wrapContent,
87-
height: wrapContent,
88-
right: box1.left,
89-
top: box1.bottom,
31+
Guideline(
32+
id: guideline,
33+
horizontal: true,
34+
guidelinePercent: 0.5,
9035
),
9136
Container(
92-
color: Colors.redAccent,
93-
alignment: Alignment.center,
94-
child: const Text('box4'),
37+
color: const Color(0xFFFFD500),
9538
).applyConstraint(
96-
id: box4,
97-
width: 50,
98-
height: 50,
99-
bottomRightTo: parent,
100-
),
101-
GestureDetector(
102-
child: Container(
103-
color: Colors.pink,
104-
alignment: Alignment.center,
105-
child: const Text('box5 draggable'),
106-
),
107-
onPanUpdate: (details) {
108-
setState(() {
109-
x += details.delta.dx;
110-
y += details.delta.dy;
111-
});
112-
},
113-
).applyConstraint(
114-
id: box5,
115-
width: 120,
116-
height: 100,
117-
centerTo: parent,
118-
zIndex: 100,
119-
translate: Offset(x, y),
120-
translateConstraint: true,
121-
),
122-
Container(
123-
color: Colors.lightGreen,
124-
alignment: Alignment.center,
125-
child: const Text('box6'),
126-
).applyConstraint(
127-
id: box6,
128-
width: 120,
129-
height: 120,
130-
centerVerticalTo: box2,
131-
verticalBias: 0.8,
132-
left: box3.right,
133-
right: parent.right,
134-
),
135-
Container(
136-
color: Colors.lightGreen,
137-
alignment: Alignment.center,
138-
child: const Text('box7'),
139-
).applyConstraint(
140-
id: box7,
141-
width: matchConstraint,
39+
id: right,
40+
width: matchParent,
14241
height: matchConstraint,
143-
left: parent.left,
144-
right: box3.left,
145-
centerVerticalTo: parent,
146-
margin: const EdgeInsets.all(50),
147-
),
148-
Container(
149-
color: Colors.cyan,
150-
alignment: Alignment.center,
151-
child: const Text('child[7] pinned to the top right'),
152-
).applyConstraint(
153-
width: 200,
154-
height: 100,
155-
left: box5.right,
156-
bottom: box5.top,
42+
top: guideline.bottom,
43+
bottom: parent.bottom,
15744
),
15845
const Text(
159-
'box9 baseline to box7',
46+
'Stand with the people of Ukraine',
16047
style: TextStyle(
48+
fontSize: 40,
16149
color: Colors.white,
16250
),
16351
).applyConstraint(
164-
id: box9,
16552
width: wrapContent,
16653
height: wrapContent,
167-
baseline: box7.baseline,
168-
left: box7.left,
169-
),
170-
...horizontalChain(
17154
centerHorizontalTo: parent,
172-
hChainList: [
173-
Container(
174-
color: Colors.redAccent,
175-
alignment: Alignment.center,
176-
child: const Text('chain item 1'),
177-
).applyConstraint(
178-
id: box10,
179-
width: matchConstraint,
180-
height: 200,
181-
top: parent.top,
182-
),
183-
Container(
184-
color: Colors.redAccent,
185-
alignment: Alignment.center,
186-
child: const Text('chain item 2'),
187-
).applyConstraint(
188-
id: box11,
189-
width: matchConstraint,
190-
height: 200,
191-
top: parent.top,
192-
),
193-
],
194-
),
195-
Container(
196-
color: Colors.yellow,
197-
alignment: Alignment.bottomCenter,
198-
child: const Text(
199-
'percentage layout\nwidth: 50% of parent\nheight: 30% of parent'),
200-
).applyConstraint(
201-
width: matchConstraint,
202-
height: matchConstraint,
203-
widthPercent: 0.5,
204-
heightPercent: 0.3,
205-
horizontalBias: 0,
206-
verticalBias: 0,
207-
centerTo: parent,
208-
),
55+
bottom: guideline.bottom,
56+
)
20957
],
21058
),
21159
),

0 commit comments

Comments
 (0)