Skip to content

Commit c56e029

Browse files
author
fbchen
committed
update example
1 parent ed93dff commit c56e029

File tree

4 files changed

+264
-18
lines changed

4 files changed

+264
-18
lines changed

‎README.md

Lines changed: 128 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -690,41 +690,159 @@ class StaggeredGridExample extends StatelessWidget {
690690
6. circle position [Flutter Web Online Example](https://constraintlayout.flutterfirst.cn)
691691

692692
```dart
693-
class CirclePositionExample extends StatelessWidget {
694-
const CirclePositionExample({Key? key}) : super(key: key);
693+
class CirclePositionExampleState extends State<CirclePositionExample> {
694+
late Timer timer;
695+
late int hour;
696+
late int minute;
697+
late int second;
698+
699+
double centerTranslateX = 0;
700+
double centerTranslateY = 0;
701+
702+
@override
703+
void initState() {
704+
super.initState();
705+
calculateClockAngle();
706+
timer = Timer.periodic(const Duration(seconds: 1), (timer) {
707+
calculateClockAngle();
708+
});
709+
}
710+
711+
void calculateClockAngle() {
712+
setState(() {
713+
DateTime now = DateTime.now();
714+
hour = now.hour;
715+
minute = now.minute;
716+
second = now.second;
717+
});
718+
}
719+
720+
@override
721+
void dispose() {
722+
super.dispose();
723+
timer.cancel();
724+
}
695725
696726
@override
697727
Widget build(BuildContext context) {
698728
return Scaffold(
699729
body: ConstraintLayout(
700730
children: [
701-
Container(
702-
color: Colors.redAccent,
731+
GestureDetector(
732+
child: Container(
733+
decoration: const BoxDecoration(
734+
color: Colors.red,
735+
borderRadius: BorderRadius.all(
736+
Radius.circular(1000),
737+
),
738+
),
739+
),
740+
onPanUpdate: (details) {
741+
setState(() {
742+
centerTranslateX += details.delta.dx;
743+
centerTranslateY += details.delta.dy;
744+
});
745+
},
703746
).applyConstraint(
704-
width: 100,
705-
height: 100,
747+
width: 20,
748+
height: 20,
706749
centerTo: parent,
750+
zIndex: 100,
751+
translate: Offset(centerTranslateX, centerTranslateY),
752+
translateConstraint: true,
707753
),
708-
for (int angle = 0; angle <= 360; angle += 30)
754+
for (int i = 0; i < 12; i++)
709755
Container(
710-
color: Colors.yellow,
756+
alignment: Alignment.center,
757+
child: Text(
758+
'${i + 1}',
759+
style: const TextStyle(
760+
fontWeight: FontWeight.bold,
761+
fontSize: 25,
762+
),
763+
),
711764
).applyConstraint(
712765
width: 50,
713766
height: 50,
714767
centerTo: rId(0),
715768
translate: circleTranslate(
716769
radius: 200,
717-
angle: angle,
770+
angle: (i + 1) * 30,
771+
),
772+
),
773+
for (int i = 0; i < 60; i++)
774+
Transform.rotate(
775+
angle: pi + pi * (i * 6 / 180),
776+
child: Container(
777+
color: Colors.grey,
778+
margin: const EdgeInsets.only(
779+
top: 405,
780+
),
718781
),
782+
).applyConstraint(
783+
width: 1,
784+
height: 415,
785+
centerTo: rId(0),
786+
visibility: i % 5 == 0 ? gone : visible,
787+
),
788+
Transform.rotate(
789+
angle: pi + pi * (hour * 30 / 180),
790+
alignment: Alignment.topCenter,
791+
child: Container(
792+
color: Colors.green,
793+
),
794+
).applyConstraint(
795+
width: 5,
796+
height: 80,
797+
centerTo: rId(0),
798+
translate: const Offset(0, 0.5),
799+
percentageTranslate: true,
800+
),
801+
Transform.rotate(
802+
angle: pi + pi * (minute * 6 / 180),
803+
alignment: Alignment.topCenter,
804+
child: Container(
805+
color: Colors.pink,
806+
),
807+
).applyConstraint(
808+
width: 5,
809+
height: 120,
810+
centerTo: rId(0),
811+
translate: const Offset(0, 0.5),
812+
percentageTranslate: true,
813+
),
814+
Transform.rotate(
815+
angle: pi + pi * (second * 6 / 180),
816+
alignment: Alignment.topCenter,
817+
child: Container(
818+
color: Colors.blue,
819+
),
820+
).applyConstraint(
821+
width: 5,
822+
height: 180,
823+
centerTo: rId(0),
824+
translate: const Offset(0, 0.5),
825+
percentageTranslate: true,
826+
),
827+
Text(
828+
'$hour:$minute:$second',
829+
style: const TextStyle(
830+
fontSize: 40,
719831
),
832+
).applyConstraint(
833+
outTopCenterTo: rId(0),
834+
margin: const EdgeInsets.only(
835+
bottom: 250,
836+
),
837+
)
720838
],
721839
),
722840
);
723841
}
724842
}
725843
```
726844

727-
![circle_position.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/circle_position.webp?raw=true)
845+
![circle_position.gif](https://github.com/hackware1993/flutter-constraintlayout/blob/master/circle_position.gif?raw=true)
728846

729847
# Performance optimization
730848

‎circle_position.gif

158 KB
Loading

‎circle_position.webp

-3.7 KB
Binary file not shown.

‎example/circle_position.dart

Lines changed: 136 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,51 @@
1+
import 'dart:async';
2+
import 'dart:math';
3+
14
import 'package:flutter/material.dart';
25
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
36

47
import 'custom_app_bar.dart';
58

6-
class CirclePositionExample extends StatelessWidget {
9+
class CirclePositionExample extends StatefulWidget {
710
const CirclePositionExample({Key? key}) : super(key: key);
811

12+
@override
13+
State createState() => CirclePositionExampleState();
14+
}
15+
16+
class CirclePositionExampleState extends State<CirclePositionExample> {
17+
late Timer timer;
18+
late int hour;
19+
late int minute;
20+
late int second;
21+
22+
double centerTranslateX = 0;
23+
double centerTranslateY = 0;
24+
25+
@override
26+
void initState() {
27+
super.initState();
28+
calculateClockAngle();
29+
timer = Timer.periodic(const Duration(seconds: 1), (timer) {
30+
calculateClockAngle();
31+
});
32+
}
33+
34+
void calculateClockAngle() {
35+
setState(() {
36+
DateTime now = DateTime.now();
37+
hour = now.hour;
38+
minute = now.minute;
39+
second = now.second;
40+
});
41+
}
42+
43+
@override
44+
void dispose() {
45+
super.dispose();
46+
timer.cancel();
47+
}
48+
949
@override
1050
Widget build(BuildContext context) {
1151
return Scaffold(
@@ -15,25 +55,113 @@ class CirclePositionExample extends StatelessWidget {
1555
),
1656
body: ConstraintLayout(
1757
children: [
18-
Container(
19-
color: Colors.redAccent,
58+
GestureDetector(
59+
child: Container(
60+
decoration: const BoxDecoration(
61+
color: Colors.red,
62+
borderRadius: BorderRadius.all(
63+
Radius.circular(1000),
64+
),
65+
),
66+
),
67+
onPanUpdate: (details) {
68+
setState(() {
69+
centerTranslateX += details.delta.dx;
70+
centerTranslateY += details.delta.dy;
71+
});
72+
},
2073
).applyConstraint(
21-
width: 100,
22-
height: 100,
74+
width: 20,
75+
height: 20,
2376
centerTo: parent,
77+
zIndex: 100,
78+
translate: Offset(centerTranslateX, centerTranslateY),
79+
translateConstraint: true,
2480
),
25-
for (int angle = 0; angle <= 360; angle += 30)
81+
for (int i = 0; i < 12; i++)
2682
Container(
27-
color: Colors.yellow,
83+
alignment: Alignment.center,
84+
child: Text(
85+
'${i + 1}',
86+
style: const TextStyle(
87+
fontWeight: FontWeight.bold,
88+
fontSize: 25,
89+
),
90+
),
2891
).applyConstraint(
2992
width: 50,
3093
height: 50,
3194
centerTo: rId(0),
3295
translate: circleTranslate(
3396
radius: 200,
34-
angle: angle,
97+
angle: (i + 1) * 30,
3598
),
3699
),
100+
for (int i = 0; i < 60; i++)
101+
Transform.rotate(
102+
angle: pi + pi * (i * 6 / 180),
103+
child: Container(
104+
color: Colors.grey,
105+
margin: const EdgeInsets.only(
106+
top: 405,
107+
),
108+
),
109+
).applyConstraint(
110+
width: 1,
111+
height: 415,
112+
centerTo: rId(0),
113+
visibility: i % 5 == 0 ? gone : visible,
114+
),
115+
Transform.rotate(
116+
angle: pi + pi * (hour * 30 / 180),
117+
alignment: Alignment.topCenter,
118+
child: Container(
119+
color: Colors.green,
120+
),
121+
).applyConstraint(
122+
width: 5,
123+
height: 80,
124+
centerTo: rId(0),
125+
translate: const Offset(0, 0.5),
126+
percentageTranslate: true,
127+
),
128+
Transform.rotate(
129+
angle: pi + pi * (minute * 6 / 180),
130+
alignment: Alignment.topCenter,
131+
child: Container(
132+
color: Colors.pink,
133+
),
134+
).applyConstraint(
135+
width: 5,
136+
height: 120,
137+
centerTo: rId(0),
138+
translate: const Offset(0, 0.5),
139+
percentageTranslate: true,
140+
),
141+
Transform.rotate(
142+
angle: pi + pi * (second * 6 / 180),
143+
alignment: Alignment.topCenter,
144+
child: Container(
145+
color: Colors.blue,
146+
),
147+
).applyConstraint(
148+
width: 5,
149+
height: 180,
150+
centerTo: rId(0),
151+
translate: const Offset(0, 0.5),
152+
percentageTranslate: true,
153+
),
154+
Text(
155+
'$hour:$minute:$second',
156+
style: const TextStyle(
157+
fontSize: 40,
158+
),
159+
).applyConstraint(
160+
outTopCenterTo: rId(0),
161+
margin: const EdgeInsets.only(
162+
bottom: 250,
163+
),
164+
)
37165
],
38166
),
39167
);

0 commit comments

Comments
 (0)