Skip to content

Commit ac6df5f

Browse files
author
fbchen
committed
support z-index
1 parent 35cb359 commit ac6df5f

File tree

6 files changed

+424
-303
lines changed

6 files changed

+424
-303
lines changed

‎README.md‎

Lines changed: 116 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,20 @@ ConstraintLayout will only be measured once, This results in extremely high layo
99

1010
1. build flexible layouts with constraints
1111
2. margin and goneMargin
12-
3. clickPadding(expand the click area of child elements without changing their actual size)
12+
3. clickPadding (quickly expand the click area of child elements without changing their actual size)
1313
4. visibility control
1414
5. constraint integrity hint
1515
6. bias
16+
7. z-index
1617

1718
Coming soon:
1819

1920
1. guideline
2021
2. barrier
2122
3. constraints visualization
2223
4. chain
23-
5. more...
24+
5. percentage layout
25+
6. more...
2426

2527
Support platform:
2628

@@ -46,112 +48,126 @@ dependencies:
4648
# Example
4749
4850
```dart
49-
import 'package:flutter/material.dart';
50-
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
51-
52-
void main() {
53-
runApp(MaterialApp(
54-
home: Scaffold(
55-
backgroundColor: Colors.black,
56-
body: ConstraintLayout(
57-
children: [
58-
Constrained(
59-
id: 'box1',
60-
width: 200,
61-
height: 200,
62-
topToTop: CL.parent,
63-
rightToRight: CL.parent,
64-
child: Container(
65-
color: Colors.redAccent,
66-
alignment: Alignment.center,
67-
child: const Text('box1'),
51+
class Example extends StatelessWidget {
52+
const Example({Key? key}) : super(key: key);
53+
54+
@override
55+
Widget build(BuildContext context) {
56+
return MaterialApp(
57+
home: Scaffold(
58+
backgroundColor: Colors.black,
59+
body: ConstraintLayout(
60+
children: [
61+
Constrained(
62+
id: 'box1',
63+
width: 200,
64+
height: 200,
65+
topToTop: CL.parent,
66+
rightToRight: CL.parent,
67+
child: Container(
68+
color: Colors.redAccent,
69+
alignment: Alignment.center,
70+
child: const Text('box1'),
71+
),
6872
),
69-
),
70-
Constrained(
71-
id: 'box2',
72-
width: CL.matchConstraint,
73-
height: CL.matchConstraint,
74-
leftToLeft: 'box3',
75-
rightToRight: 'box3',
76-
topToBottom: 'box3',
77-
bottomToBottom: CL.parent,
78-
child: Container(
79-
color: Colors.blue,
80-
alignment: Alignment.center,
81-
child: const Text('box2'),
73+
Constrained(
74+
id: 'box2',
75+
width: CL.matchConstraint,
76+
height: CL.matchConstraint,
77+
leftToLeft: 'box3',
78+
rightToRight: 'box3',
79+
topToBottom: 'box3',
80+
bottomToBottom: CL.parent,
81+
child: Container(
82+
color: Colors.blue,
83+
alignment: Alignment.center,
84+
child: const Text('box2'),
85+
),
8286
),
83-
),
84-
Constrained(
85-
id: 'box4',
86-
width: 50,
87-
height: 50,
88-
rightToRight: CL.parent,
89-
bottomToBottom: CL.parent,
90-
child: Container(
91-
color: Colors.redAccent,
92-
alignment: Alignment.center,
93-
child: const Text('box4'),
87+
Constrained(
88+
id: 'box4',
89+
width: 50,
90+
height: 50,
91+
rightToRight: CL.parent,
92+
bottomToBottom: CL.parent,
93+
child: Container(
94+
color: Colors.redAccent,
95+
alignment: Alignment.center,
96+
child: const Text('box4'),
97+
),
9498
),
95-
),
96-
Constrained(
97-
id: 'box7',
98-
width: 120,
99-
height: 120,
100-
centerVertical: true,
101-
verticalBias: 0.5,
102-
leftToRight: 'box3',
103-
rightToRight: CL.parent,
104-
horizontalBias: 0.5,
105-
child: Container(
106-
color: Colors.lightGreen,
107-
alignment: Alignment.center,
108-
child: const Text('box7'),
99+
Constrained(
100+
id: 'box7',
101+
width: 120,
102+
height: 120,
103+
centerVertical: true,
104+
verticalBias: 0.8,
105+
leftToRight: 'box3',
106+
rightToRight: CL.parent,
107+
child: Container(
108+
color: Colors.lightGreen,
109+
alignment: Alignment.center,
110+
child: const Text('box7'),
111+
),
109112
),
110-
),
111-
Constrained(
112-
id: 'box8',
113-
width: CL.matchConstraint,
114-
height: CL.matchConstraint,
115-
topToTop: 'box1',
116-
leftToLeft: CL.parent,
117-
rightToLeft: 'box3',
118-
bottomToBottom: CL.parent,
119-
margin: const EdgeInsets.all(50),
120-
child: Container(
121-
color: Colors.lightGreen,
122-
alignment: Alignment.center,
123-
child: const Text('box8'),
113+
Constrained(
114+
id: 'box8',
115+
width: CL.matchConstraint,
116+
height: CL.matchConstraint,
117+
topToTop: 'box1',
118+
leftToLeft: CL.parent,
119+
rightToLeft: 'box3',
120+
bottomToBottom: CL.parent,
121+
margin: const EdgeInsets.all(50),
122+
child: Container(
123+
color: Colors.lightGreen,
124+
alignment: Alignment.center,
125+
child: const Text('box8'),
126+
),
124127
),
125-
),
126-
Constrained(
127-
id: 'box3',
128-
width: CL.wrapContent,
129-
height: CL.wrapContent,
130-
rightToLeft: 'box1',
131-
topToBottom: 'box1',
132-
child: Container(
133-
color: Colors.orange,
134-
width: 200,
135-
height: 300,
136-
alignment: Alignment.center,
137-
child: const Text('box3'),
128+
Constrained(
129+
id: 'box3',
130+
width: CL.wrapContent,
131+
height: CL.wrapContent,
132+
rightToLeft: 'box1',
133+
topToBottom: 'box1',
134+
child: Container(
135+
color: Colors.orange,
136+
width: 200,
137+
height: 300,
138+
alignment: Alignment.center,
139+
child: const Text('box3'),
140+
),
138141
),
139-
),
140-
Constrained(
141-
width: 100,
142-
height: 100,
143-
center: true,
144-
child: Container(
145-
color: Colors.pink,
146-
alignment: Alignment.center,
147-
child: const Text('child[6]'),
142+
Constrained(
143+
width: 100,
144+
height: 100,
145+
center: true,
146+
zIndex: 4,
147+
child: Container(
148+
color: Colors.pink,
149+
alignment: Alignment.center,
150+
child: const Text('child[6]'),
151+
),
148152
),
149-
)
150-
],
153+
Constrained(
154+
width: 50,
155+
height: 20,
156+
leftToRight: 'box7',
157+
bottomToTop: 'box7',
158+
margin: const EdgeInsets.only(left: -25),
159+
child: Container(
160+
color: Colors.cyan,
161+
alignment: Alignment.center,
162+
child: const Text('child[7]'),
163+
),
164+
)
165+
],
166+
),
151167
),
152-
),
153-
));
154-
}
168+
);
169+
}
170+
}
155171
```
156172

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

‎effect.webp‎

1.58 KB
Loading

‎lib/constraint_layout.dart‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)