Skip to content

Commit 96ce6f9

Browse files
author
fbchen
committed
update example
1 parent 0b0b5c4 commit 96ce6f9

File tree

3 files changed

+237
-1
lines changed

3 files changed

+237
-1
lines changed

‎example/charts.dart‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import 'dart:collection';
2+
import 'dart:math';
3+
4+
import 'package:flutter/material.dart';
5+
import 'package:flutter_constraintlayout/src/constraint_layout.dart';
6+
7+
import 'custom_app_bar.dart';
8+
9+
class ChartsExample extends StatefulWidget {
10+
const ChartsExample({Key? key}) : super(key: key);
11+
12+
@override
13+
State createState() => ChartsState();
14+
}
15+
16+
class DotPainter extends CustomPainter {
17+
const DotPainter();
18+
19+
@override
20+
bool shouldRepaint(DotPainter oldDelegate) => false;
21+
22+
@override
23+
void paint(Canvas canvas, Size size) {
24+
double dashWidth = 5;
25+
double dashSpace = 2;
26+
Paint paint = Paint()
27+
..strokeWidth = 1
28+
..color = Colors.red;
29+
double offset = 0;
30+
while (offset < size.width) {
31+
canvas.drawLine(Offset(offset, 0), Offset(offset + dashWidth, 0), paint);
32+
offset += dashWidth + dashSpace;
33+
}
34+
}
35+
}
36+
37+
class PolylinePainter extends CustomPainter {
38+
Map<int, Rect> polylineData;
39+
40+
PolylinePainter(this.polylineData);
41+
42+
@override
43+
bool shouldRepaint(PolylinePainter oldDelegate) => false;
44+
45+
@override
46+
void paint(Canvas canvas, Size size) {
47+
Paint paint = Paint()
48+
..strokeWidth = 1
49+
..color = Colors.green;
50+
List<Rect> rectList = polylineData.values.toList();
51+
Rect last = rectList[0];
52+
Rect current;
53+
for (int i = 1; i < rectList.length; i++) {
54+
current = rectList[i];
55+
canvas.drawLine(
56+
Offset(last.left + last.width / 2, last.top + last.height),
57+
Offset(
58+
current.left + current.width / 2, current.top + current.height),
59+
paint);
60+
last = current;
61+
}
62+
}
63+
}
64+
65+
class ChartsState extends State<ChartsExample> {
66+
late List<String> xTitles;
67+
late List<int> data;
68+
late List<int> compareData;
69+
late int maxValue;
70+
int current = 6;
71+
Map<int, Rect> polylineData = HashMap();
72+
73+
@override
74+
void initState() {
75+
super.initState();
76+
xTitles = [for (int i = 0; i < 60; i++) '$i'.padLeft(2, '0') + ':00'];
77+
Random random = Random();
78+
data = [for (int i = 0; i < xTitles.length; i++) 10 + random.nextInt(91)];
79+
compareData = data.toList()..shuffle();
80+
maxValue = data.reduce(max);
81+
}
82+
83+
@override
84+
Widget build(BuildContext context) {
85+
return Scaffold(
86+
appBar: const CustomAppBar(
87+
title: 'Charts',
88+
codePath: 'example/charts.dart',
89+
),
90+
body: SingleChildScrollView(
91+
child: ConstraintLayout(
92+
width: wrapContent,
93+
children: [
94+
Container(
95+
color: Colors.black,
96+
child: const Text(
97+
'Only shows the flexibility of Flutter ConstraintLayout\nplease use as appropriate',
98+
style: TextStyle(
99+
color: Colors.white,
100+
fontSize: 16,
101+
),
102+
textAlign: TextAlign.center,
103+
),
104+
).applyConstraint(
105+
topLeftTo: parent,
106+
),
107+
Container(
108+
color: Colors.black,
109+
).applyConstraint(
110+
height: 1,
111+
width: matchParent,
112+
bottom: parent.bottom.margin(32),
113+
),
114+
for (int i = 0; i < 8; i++)
115+
const CustomPaint(
116+
painter: DotPainter(),
117+
).applyConstraint(
118+
height: 1,
119+
width: matchParent,
120+
bottom: parent.bottom.margin(100 * (i + 1).toDouble()),
121+
),
122+
for (int i = 0; i < data.length; i++)
123+
GestureDetector(
124+
onTap: () {
125+
setState(() {
126+
current = i;
127+
});
128+
},
129+
child: Container(
130+
color: i == current ? Colors.deepOrange : Colors.orangeAccent,
131+
),
132+
).applyConstraint(
133+
id: cId('data$i'),
134+
width: 18,
135+
height: (data[i] / maxValue) * 400,
136+
left: (i == 0 ? parent.left : cId('data${i - 1}').right)
137+
.margin(44),
138+
bottom: parent.bottom.margin(33),
139+
),
140+
const SizedBox().applyConstraint(
141+
width: 0,
142+
left: cId('data${data.length - 1}').right.margin(44),
143+
bottom: parent.bottom,
144+
),
145+
for (int i = 0; i < xTitles.length; i++)
146+
GestureDetector(
147+
onTap: () {
148+
setState(() {
149+
current = i;
150+
});
151+
},
152+
child: Text(
153+
xTitles[i],
154+
style: TextStyle(
155+
color: i == current ? Colors.black : Colors.grey,
156+
),
157+
),
158+
).applyConstraint(
159+
bottom: parent.bottom.margin(15),
160+
centerHorizontalTo: cId('data$i'),
161+
),
162+
Container(
163+
color: Colors.blue,
164+
).applyConstraint(
165+
outTopCenterTo: cId('data$current'),
166+
top: parent.top,
167+
width: 1,
168+
height: matchConstraint,
169+
),
170+
CustomPaint(
171+
painter: PolylinePainter(polylineData),
172+
).applyConstraint(
173+
width: matchParent,
174+
height: matchParent,
175+
eIndex: 0,
176+
),
177+
for (int i = 0; i < compareData.length; i++)
178+
Container(
179+
decoration: BoxDecoration(
180+
color: Colors.white,
181+
borderRadius: const BorderRadius.all(Radius.circular(10)),
182+
border: Border.all(
183+
width: 1,
184+
color: Colors.green,
185+
),
186+
),
187+
).applyConstraint(
188+
size: 10,
189+
bottomCenterTo: cId('data$i')
190+
.bottomMargin((compareData[i] / maxValue) * 400),
191+
translate: const Offset(0, 0.5),
192+
percentageTranslate: true,
193+
callback: (_, rect) {
194+
polylineData[i] = rect;
195+
},
196+
),
197+
Container(
198+
decoration: const BoxDecoration(
199+
color: Colors.blue,
200+
borderRadius: BorderRadius.all(Radius.circular(4)),
201+
),
202+
child: Text(
203+
'${data[current]}',
204+
style: const TextStyle(
205+
color: Colors.white,
206+
),
207+
),
208+
padding: const EdgeInsets.all(5),
209+
).applyConstraint(
210+
outTopCenterTo: cId('data$current').bottomMargin(33),
211+
),
212+
Container(
213+
decoration: const BoxDecoration(
214+
color: Colors.grey,
215+
borderRadius: BorderRadius.all(Radius.circular(4)),
216+
),
217+
child: Text(
218+
'${compareData[current]}',
219+
style: const TextStyle(
220+
color: Colors.white,
221+
),
222+
),
223+
padding: const EdgeInsets.all(5),
224+
).applyConstraint(
225+
outTopCenterTo: cId('data$current').bottomMargin(65),
226+
),
227+
],
228+
),
229+
scrollDirection: Axis.horizontal,
230+
),
231+
);
232+
}
233+
}

‎example/home.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';
33

44
import 'badge.dart';
55
import 'barrier.dart';
6+
import 'charts.dart';
67
import 'circle_position.dart';
78
import 'coming_soon.dart';
89
import 'complex_list.dart';
@@ -39,6 +40,7 @@ class ExampleHome extends StatelessWidget {
3940
'Circle Position': const CirclePositionExample(),
4041
'Self wrapContent': const SelfWrapContentExample(),
4142
'Margin': const MarginExample(),
43+
'Charts': const ChartsExample(),
4244
'Chain (Coming soon)': const ComingSoonWidget(),
4345
};
4446

‎pubspec.yaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,5 @@ flutter:
3737
- example/staggered_grid.dart
3838
- example/circle_position.dart
3939
- example/self_wrap_content.dart
40-
- example/margin.dart
40+
- example/margin.dart
41+
- example/charts.dart

0 commit comments

Comments
 (0)