Skip to content

Commit 56645f5

Browse files
author
fbchen
committed
modify demo
1 parent 8db0cf5 commit 56645f5

File tree

2 files changed

+109
-98
lines changed

2 files changed

+109
-98
lines changed

‎lib/example.dart‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
3+
4+
class Example extends StatelessWidget {
5+
const Example({Key? key}) : super(key: key);
6+
7+
@override
8+
Widget build(BuildContext context) {
9+
return ConstraintLayout(
10+
children: [
11+
Constrained(
12+
id: 'box1',
13+
width: 200,
14+
height: 200,
15+
topToTop: CL.parent,
16+
rightToRight: CL.parent,
17+
child: Container(
18+
color: Colors.redAccent,
19+
alignment: Alignment.center,
20+
child: const Text('box1'),
21+
),
22+
),
23+
Constrained(
24+
id: 'box2',
25+
width: CL.matchConstraint,
26+
height: CL.matchConstraint,
27+
leftToLeft: 'box3',
28+
rightToRight: 'box3',
29+
topToBottom: 'box3',
30+
bottomToBottom: CL.parent,
31+
child: Container(
32+
color: Colors.blue,
33+
alignment: Alignment.center,
34+
child: const Text('box2'),
35+
),
36+
),
37+
Constrained(
38+
id: 'box4',
39+
width: 50,
40+
height: 50,
41+
rightToRight: CL.parent,
42+
bottomToBottom: CL.parent,
43+
child: Container(
44+
color: Colors.redAccent,
45+
alignment: Alignment.center,
46+
child: const Text('box4'),
47+
),
48+
),
49+
Constrained(
50+
id: 'box7',
51+
width: 120,
52+
height: 120,
53+
centerVertical: true,
54+
verticalBias: 0.5,
55+
leftToRight: 'box3',
56+
rightToRight: CL.parent,
57+
horizontalBias: 0.5,
58+
child: Container(
59+
color: Colors.lightGreen,
60+
alignment: Alignment.center,
61+
child: const Text('box7'),
62+
),
63+
),
64+
Constrained(
65+
id: 'box8',
66+
width: CL.matchConstraint,
67+
height: CL.matchConstraint,
68+
topToTop: 'box1',
69+
leftToLeft: CL.parent,
70+
rightToLeft: 'box3',
71+
bottomToBottom: CL.parent,
72+
margin: const EdgeInsets.all(50),
73+
child: Container(
74+
color: Colors.lightGreen,
75+
alignment: Alignment.center,
76+
child: const Text('box8'),
77+
),
78+
),
79+
Constrained(
80+
id: 'box3',
81+
width: CL.wrapContent,
82+
height: CL.wrapContent,
83+
rightToLeft: 'box1',
84+
topToBottom: 'box1',
85+
child: Container(
86+
color: Colors.orange,
87+
width: 200,
88+
height: 300,
89+
alignment: Alignment.center,
90+
child: const Text('box3'),
91+
),
92+
),
93+
Constrained(
94+
width: 100,
95+
height: 100,
96+
center: true,
97+
child: Container(
98+
color: Colors.pink,
99+
alignment: Alignment.center,
100+
child: const Text('child[6]'),
101+
),
102+
)
103+
],
104+
);
105+
}
106+
}

‎lib/main.dart‎

Lines changed: 3 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,11 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
2+
import 'package:flutter_constraintlayout/example.dart';
33

44
void main() {
5-
runApp(MaterialApp(
5+
runApp(const MaterialApp(
66
home: Scaffold(
77
backgroundColor: Colors.black,
8-
body: ConstraintLayout(
9-
children: [
10-
Constrained(
11-
id: 'box1',
12-
width: 200,
13-
height: 200,
14-
topToTop: CL.parent,
15-
rightToRight: CL.parent,
16-
child: Container(
17-
color: Colors.redAccent,
18-
alignment: Alignment.center,
19-
child: const Text('box1'),
20-
),
21-
),
22-
Constrained(
23-
id: 'box2',
24-
width: CL.matchConstraint,
25-
height: CL.matchConstraint,
26-
leftToLeft: 'box3',
27-
rightToRight: 'box3',
28-
topToBottom: 'box3',
29-
bottomToBottom: CL.parent,
30-
child: Container(
31-
color: Colors.blue,
32-
alignment: Alignment.center,
33-
child: const Text('box2'),
34-
),
35-
),
36-
Constrained(
37-
id: 'box4',
38-
width: 50,
39-
height: 50,
40-
rightToRight: CL.parent,
41-
bottomToBottom: CL.parent,
42-
child: Container(
43-
color: Colors.redAccent,
44-
alignment: Alignment.center,
45-
child: const Text('box4'),
46-
),
47-
),
48-
Constrained(
49-
id: 'box7',
50-
width: 120,
51-
height: 120,
52-
centerVertical: true,
53-
verticalBias: 0.5,
54-
leftToRight: 'box3',
55-
rightToRight: CL.parent,
56-
horizontalBias: 0.5,
57-
child: Container(
58-
color: Colors.lightGreen,
59-
alignment: Alignment.center,
60-
child: const Text('box7'),
61-
),
62-
),
63-
Constrained(
64-
id: 'box8',
65-
width: CL.matchConstraint,
66-
height: CL.matchConstraint,
67-
topToTop: 'box1',
68-
leftToLeft: CL.parent,
69-
rightToLeft: 'box3',
70-
bottomToBottom: CL.parent,
71-
margin: const EdgeInsets.all(50),
72-
child: Container(
73-
color: Colors.lightGreen,
74-
alignment: Alignment.center,
75-
child: const Text('box8'),
76-
),
77-
),
78-
Constrained(
79-
id: 'box3',
80-
width: CL.wrapContent,
81-
height: CL.wrapContent,
82-
rightToLeft: 'box1',
83-
topToBottom: 'box1',
84-
child: Container(
85-
color: Colors.orange,
86-
width: 200,
87-
height: 300,
88-
alignment: Alignment.center,
89-
child: const Text('box3'),
90-
),
91-
),
92-
Constrained(
93-
width: 100,
94-
height: 100,
95-
center: true,
96-
child: Container(
97-
color: Colors.pink,
98-
alignment: Alignment.center,
99-
child: const Text('child[6]'),
100-
),
101-
)
102-
],
103-
),
8+
body: Example(),
1049
),
10510
));
10611
}

0 commit comments

Comments
 (0)