Skip to content

Commit a05a528

Browse files
author
fbchen
committed
update readme
1 parent aabda93 commit a05a528

File tree

4 files changed

+227
-12
lines changed

4 files changed

+227
-12
lines changed

‎README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
Build flexible layouts with constraints, Similar to Android ConstraintLayout.
44

5-
No matter how complex the layout is and how deep the dependencies are, each child element of
6-
ConstraintLayout will only be measured once, This results in extremely high layout performance.
5+
No matter how complex the layout is and how deep the constraints are, it has almost the same
6+
performance as Flex and Stack. When facing complex layouts, it provides better performance,
7+
flexibility, and a very flat code hierarchy than Flex and Stack. Say no to 'nesting hell'.
78

89
Anyone who sends you a harassing message, you can send him Flutter code and use nested hell to rule
910
him.

‎lib/example.dart renamed to ‎lib/examples/guideline.dart

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
33

4-
class Example extends StatefulWidget {
5-
const Example({Key? key}) : super(key: key);
6-
7-
@override
8-
State createState() => ExampleState();
9-
}
10-
11-
class ExampleState extends State<Example> {
12-
ConstraintId guideline = ConstraintId();
4+
class GuidelineExample extends StatelessWidget {
5+
const GuidelineExample({Key? key}) : super(key: key);
136

147
@override
158
Widget build(BuildContext context) {
9+
ConstraintId guideline = ConstraintId();
1610
return MaterialApp(
1711
home: Scaffold(
1812
body: ConstraintLayout(

‎lib/examples/sumary.dart

+220
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
3+
4+
class Example extends StatefulWidget {
5+
const Example({Key? key}) : super(key: key);
6+
7+
@override
8+
State createState() => ExampleState();
9+
}
10+
11+
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();
27+
ConstraintId barrier = ConstraintId();
28+
29+
@override
30+
Widget build(BuildContext context) {
31+
return MaterialApp(
32+
home: Scaffold(
33+
backgroundColor: Colors.black,
34+
body: ConstraintLayout(
35+
// Constraints can be separated from widgets
36+
childConstraints: [
37+
Constraint(
38+
id: box0,
39+
width: 200,
40+
height: 200,
41+
bottomLeftTo: parent,
42+
zIndex: 20,
43+
)
44+
],
45+
children: [
46+
Container(
47+
color: Colors.redAccent,
48+
alignment: Alignment.center,
49+
child: const Text('box0'),
50+
).applyConstraintId(
51+
id: box0, // Constraints can be separated from widgets
52+
),
53+
Container(
54+
color: Colors.redAccent,
55+
alignment: Alignment.center,
56+
child: const Text('box1'),
57+
).apply(
58+
constraint: Constraint(
59+
// Constraints set with widgets
60+
id: box1,
61+
width: 200,
62+
height: 100,
63+
topRightTo: parent,
64+
),
65+
),
66+
Container(
67+
color: Colors.blue,
68+
alignment: Alignment.center,
69+
child: const Text('box2'),
70+
).applyConstraint(
71+
// Constraints set with widgets easy way
72+
id: box2,
73+
width: matchConstraint,
74+
height: matchConstraint,
75+
centerHorizontalTo: box3,
76+
top: box3.bottom,
77+
bottom: parent.bottom,
78+
),
79+
Container(
80+
color: Colors.orange,
81+
width: 200,
82+
height: 150,
83+
alignment: Alignment.center,
84+
child: const Text('box3'),
85+
).applyConstraint(
86+
id: box3,
87+
width: wrapContent,
88+
height: wrapContent,
89+
right: box1.left,
90+
top: box1.bottom,
91+
),
92+
Container(
93+
color: Colors.redAccent,
94+
alignment: Alignment.center,
95+
child: const Text('box4'),
96+
).applyConstraint(
97+
id: box4,
98+
width: 50,
99+
height: 50,
100+
bottomRightTo: parent,
101+
),
102+
GestureDetector(
103+
child: Container(
104+
color: Colors.pink,
105+
alignment: Alignment.center,
106+
child: const Text('box5 draggable'),
107+
),
108+
onPanUpdate: (details) {
109+
setState(() {
110+
x += details.delta.dx;
111+
y += details.delta.dy;
112+
});
113+
},
114+
).applyConstraint(
115+
id: box5,
116+
width: 120,
117+
height: 100,
118+
centerTo: parent,
119+
zIndex: 100,
120+
translate: Offset(x, y),
121+
translateConstraint: true,
122+
),
123+
Container(
124+
color: Colors.lightGreen,
125+
alignment: Alignment.center,
126+
child: const Text('box6'),
127+
).applyConstraint(
128+
id: box6,
129+
width: 120,
130+
height: 120,
131+
centerVerticalTo: box2,
132+
verticalBias: 0.8,
133+
left: box3.right,
134+
right: parent.right,
135+
),
136+
Container(
137+
color: Colors.lightGreen,
138+
alignment: Alignment.center,
139+
child: const Text('box7'),
140+
).applyConstraint(
141+
id: box7,
142+
width: matchConstraint,
143+
height: matchConstraint,
144+
left: parent.left,
145+
right: box3.left,
146+
centerVerticalTo: parent,
147+
margin: const EdgeInsets.all(50),
148+
),
149+
Container(
150+
color: Colors.cyan,
151+
alignment: Alignment.center,
152+
child: const Text('child[7] pinned to the top right'),
153+
).applyConstraint(
154+
width: 200,
155+
height: 100,
156+
left: box5.right,
157+
bottom: box5.top,
158+
),
159+
const Text(
160+
'box9 baseline to box7',
161+
style: TextStyle(
162+
color: Colors.white,
163+
),
164+
).applyConstraint(
165+
id: box9,
166+
width: wrapContent,
167+
height: wrapContent,
168+
baseline: box7.baseline,
169+
left: box7.left,
170+
),
171+
...horizontalChain(
172+
centerHorizontalTo: parent,
173+
hChainList: [
174+
Container(
175+
color: Colors.redAccent,
176+
alignment: Alignment.center,
177+
child: const Text('chain item 1'),
178+
).applyConstraint(
179+
id: box10,
180+
width: matchConstraint,
181+
height: 200,
182+
top: parent.top,
183+
),
184+
Container(
185+
color: Colors.redAccent,
186+
alignment: Alignment.center,
187+
child: const Text('chain item 2'),
188+
).applyConstraint(
189+
id: box11,
190+
width: matchConstraint,
191+
height: 200,
192+
top: parent.top,
193+
),
194+
],
195+
),
196+
Container(
197+
color: Colors.yellow,
198+
alignment: Alignment.bottomCenter,
199+
child: const Text(
200+
'percentage layout\nwidth: 50% of parent\nheight: 30% of parent'),
201+
).applyConstraint(
202+
width: matchConstraint,
203+
height: matchConstraint,
204+
widthPercent: 0.5,
205+
heightPercent: 0.3,
206+
horizontalBias: 0,
207+
verticalBias: 0,
208+
centerTo: parent,
209+
),
210+
Barrier(
211+
id: barrier,
212+
direction: BarrierDirection.bottom,
213+
referencedIds: [box3, box5],
214+
),
215+
],
216+
),
217+
),
218+
);
219+
}
220+
}

‎lib/main.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_constraintlayout/example.dart';
2+
import 'package:flutter_constraintlayout/examples/sumary.dart';
33

44
void main() {
55
runApp(const Example());

0 commit comments

Comments
 (0)