Skip to content

Commit 57fec7f

Browse files
author
fbchen
committed
update example
1 parent 14f0e97 commit 57fec7f

File tree

2 files changed

+111
-70
lines changed

2 files changed

+111
-70
lines changed

‎README.md‎

Lines changed: 57 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,20 @@ dependencies:
4949
# Example
5050
5151
```dart
52-
class Example extends StatelessWidget {
52+
import 'package:flutter/material.dart';
53+
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
54+
55+
class Example extends StatefulWidget {
5356
const Example({Key? key}) : super(key: key);
5457

58+
@override
59+
State createState() => ExampleState();
60+
}
61+
62+
class ExampleState extends State<Example> {
63+
double x = 0;
64+
double y = 0;
65+
5566
@override
5667
Widget build(BuildContext context) {
5768
return MaterialApp(
@@ -85,6 +96,20 @@ class Example extends StatelessWidget {
8596
child: const Text('box2'),
8697
),
8798
),
99+
Constrained(
100+
id: 'box3',
101+
width: CL.wrapContent,
102+
height: CL.wrapContent,
103+
rightToLeft: 'box1',
104+
topToBottom: 'box1',
105+
child: Container(
106+
color: Colors.orange,
107+
width: 200,
108+
height: 300,
109+
alignment: Alignment.center,
110+
child: const Text('box3'),
111+
),
112+
),
88113
Constrained(
89114
id: 'box4',
90115
width: 50,
@@ -98,7 +123,30 @@ class Example extends StatelessWidget {
98123
),
99124
),
100125
Constrained(
101-
id: 'box7',
126+
id: 'box5',
127+
width: 120,
128+
height: 100,
129+
center: true,
130+
zIndex: 100,
131+
translate: Offset(x, y),
132+
clickPadding: const EdgeInsets.all(30),
133+
translateDependency: true,
134+
child: GestureDetector(
135+
child: Container(
136+
color: Colors.pink,
137+
alignment: Alignment.center,
138+
child: const Text('box5 draggable'),
139+
),
140+
onPanUpdate: (details) {
141+
setState(() {
142+
x += details.delta.dx;
143+
y += details.delta.dy;
144+
});
145+
},
146+
),
147+
),
148+
Constrained(
149+
id: 'box6',
102150
width: 120,
103151
height: 120,
104152
centerVertical: true,
@@ -108,11 +156,11 @@ class Example extends StatelessWidget {
108156
child: Container(
109157
color: Colors.lightGreen,
110158
alignment: Alignment.center,
111-
child: const Text('box7'),
159+
child: const Text('box6'),
112160
),
113161
),
114162
Constrained(
115-
id: 'box8',
163+
id: 'box7',
116164
width: CL.matchConstraint,
117165
height: CL.matchConstraint,
118166
topToTop: 'box1',
@@ -123,44 +171,18 @@ class Example extends StatelessWidget {
123171
child: Container(
124172
color: Colors.lightGreen,
125173
alignment: Alignment.center,
126-
child: const Text('box8'),
127-
),
128-
),
129-
Constrained(
130-
id: 'box3',
131-
width: CL.wrapContent,
132-
height: CL.wrapContent,
133-
rightToLeft: 'box1',
134-
topToBottom: 'box1',
135-
child: Container(
136-
color: Colors.orange,
137-
width: 200,
138-
height: 300,
139-
alignment: Alignment.center,
140-
child: const Text('box3'),
174+
child: const Text('box7'),
141175
),
142176
),
143177
Constrained(
144-
width: 100,
178+
width: 200,
145179
height: 100,
146-
center: true,
147-
zIndex: 4,
148-
child: Container(
149-
color: Colors.pink,
150-
alignment: Alignment.center,
151-
child: const Text('child[6]'),
152-
),
153-
),
154-
Constrained(
155-
width: 50,
156-
height: 20,
157-
leftToRight: 'box7',
158-
bottomToTop: 'box7',
159-
margin: const EdgeInsets.only(left: -25),
180+
leftToRight: 'box5',
181+
bottomToTop: 'box5',
160182
child: Container(
161183
color: Colors.cyan,
162184
alignment: Alignment.center,
163-
child: const Text('child[7]'),
185+
child: const Text('child[7] pinned to the top right'),
164186
),
165187
)
166188
],

‎lib/example.dart‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_constraintlayout/constrait_layout/constraint_layout.dart';
33

4-
class Example extends StatelessWidget {
4+
class Example extends StatefulWidget {
55
const Example({Key? key}) : super(key: key);
66

7+
@override
8+
State createState() => ExampleState();
9+
}
10+
11+
class ExampleState extends State<Example> {
12+
double x = 0;
13+
double y = 0;
14+
715
@override
816
Widget build(BuildContext context) {
917
return MaterialApp(
@@ -37,6 +45,20 @@ class Example extends StatelessWidget {
3745
child: const Text('box2'),
3846
),
3947
),
48+
Constrained(
49+
id: 'box3',
50+
width: CL.wrapContent,
51+
height: CL.wrapContent,
52+
rightToLeft: 'box1',
53+
topToBottom: 'box1',
54+
child: Container(
55+
color: Colors.orange,
56+
width: 200,
57+
height: 300,
58+
alignment: Alignment.center,
59+
child: const Text('box3'),
60+
),
61+
),
4062
Constrained(
4163
id: 'box4',
4264
width: 50,
@@ -50,7 +72,30 @@ class Example extends StatelessWidget {
5072
),
5173
),
5274
Constrained(
53-
id: 'box7',
75+
id: 'box5',
76+
width: 120,
77+
height: 100,
78+
center: true,
79+
zIndex: 100,
80+
translate: Offset(x, y),
81+
clickPadding: const EdgeInsets.all(30),
82+
translateDependency: true,
83+
child: GestureDetector(
84+
child: Container(
85+
color: Colors.pink,
86+
alignment: Alignment.center,
87+
child: const Text('box5 draggable'),
88+
),
89+
onPanUpdate: (details) {
90+
setState(() {
91+
x += details.delta.dx;
92+
y += details.delta.dy;
93+
});
94+
},
95+
),
96+
),
97+
Constrained(
98+
id: 'box6',
5499
width: 120,
55100
height: 120,
56101
centerVertical: true,
@@ -60,11 +105,11 @@ class Example extends StatelessWidget {
60105
child: Container(
61106
color: Colors.lightGreen,
62107
alignment: Alignment.center,
63-
child: const Text('box7'),
108+
child: const Text('box6'),
64109
),
65110
),
66111
Constrained(
67-
id: 'box8',
112+
id: 'box7',
68113
width: CL.matchConstraint,
69114
height: CL.matchConstraint,
70115
topToTop: 'box1',
@@ -75,44 +120,18 @@ class Example extends StatelessWidget {
75120
child: Container(
76121
color: Colors.lightGreen,
77122
alignment: Alignment.center,
78-
child: const Text('box8'),
79-
),
80-
),
81-
Constrained(
82-
id: 'box3',
83-
width: CL.wrapContent,
84-
height: CL.wrapContent,
85-
rightToLeft: 'box1',
86-
topToBottom: 'box1',
87-
child: Container(
88-
color: Colors.orange,
89-
width: 200,
90-
height: 300,
91-
alignment: Alignment.center,
92-
child: const Text('box3'),
123+
child: const Text('box7'),
93124
),
94125
),
95126
Constrained(
96-
width: 100,
127+
width: 200,
97128
height: 100,
98-
center: true,
99-
zIndex: 4,
100-
child: Container(
101-
color: Colors.pink,
102-
alignment: Alignment.center,
103-
child: const Text('child[6]'),
104-
),
105-
),
106-
Constrained(
107-
width: 50,
108-
height: 20,
109-
leftToRight: 'box7',
110-
bottomToTop: 'box7',
111-
margin: const EdgeInsets.only(left: -25),
129+
leftToRight: 'box5',
130+
bottomToTop: 'box5',
112131
child: Container(
113132
color: Colors.cyan,
114133
alignment: Alignment.center,
115-
child: const Text('child[7]'),
134+
child: const Text('child[7] pinned to the top right'),
116135
),
117136
)
118137
],

0 commit comments

Comments
 (0)