Skip to content

Commit 3dcd86f

Browse files
hackwhackw
committed
update example
1 parent 96ce6f9 commit 3dcd86f

File tree

1 file changed

+123
-140
lines changed

1 file changed

+123
-140
lines changed

‎example/charts.dart‎

Lines changed: 123 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,6 @@ class ChartsExample extends StatefulWidget {
1313
State createState() => ChartsState();
1414
}
1515

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-
3716
class PolylinePainter extends CustomPainter {
3817
Map<int, Rect> polylineData;
3918

@@ -87,146 +66,150 @@ class ChartsState extends State<ChartsExample> {
8766
title: 'Charts',
8867
codePath: 'example/charts.dart',
8968
),
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,
69+
body: Scrollbar(
70+
isAlwaysShown: true,
71+
child: SingleChildScrollView(
72+
child: ConstraintLayout(
73+
width: wrapContent,
74+
children: [
75+
Container(
76+
color: Colors.black,
77+
child: const Text(
78+
'Only shows the flexibility of Flutter ConstraintLayout\nplease use as appropriate\nswipe right to see all chart',
79+
style: TextStyle(
80+
color: Colors.white,
81+
fontSize: 16,
82+
),
83+
textAlign: TextAlign.center,
10184
),
102-
textAlign: TextAlign.center,
85+
).applyConstraint(
86+
topCenterTo: parent,
10387
),
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(),
88+
Container(
89+
color: Colors.black,
11790
).applyConstraint(
91+
id: cId('base'),
11892
height: 1,
11993
width: matchParent,
120-
bottom: parent.bottom.margin(100 * (i + 1).toDouble()),
94+
bottom: parent.bottom.margin(40),
12195
),
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,
96+
for (int i = 0; i < 8; i++)
97+
Container(
98+
color: Colors.grey.withAlpha(80),
99+
).applyConstraint(
100+
height: 1,
101+
width: matchParent,
102+
bottom: cId('base').bottom.margin(100 * (i + 1).toDouble()),
131103
),
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),
104+
for (int i = 0; i < data.length; i++)
105+
GestureDetector(
106+
onTap: () {
107+
setState(() {
108+
current = i;
109+
});
110+
},
111+
child: Container(
112+
color:
113+
i == current ? Colors.deepOrange : Colors.orangeAccent,
114+
),
115+
).applyConstraint(
116+
id: cId('data$i'),
117+
width: 18,
118+
height: (data[i] / maxValue) * 400,
119+
left: parent.left.margin((i + 1) * 44),
120+
bottom: parent.bottom.margin(41),
121+
),
122+
const SizedBox().applyConstraint(
123+
width: 0,
124+
left: cId('data${data.length - 1}').right.margin(44),
125+
bottom: parent.bottom.margin(41),
139126
),
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,
127+
for (int i = 0; i < xTitles.length; i++)
128+
GestureDetector(
129+
onTap: () {
130+
setState(() {
131+
current = i;
132+
});
133+
},
134+
child: Text(
135+
xTitles[i],
136+
style: TextStyle(
137+
color: i == current ? Colors.black : Colors.grey,
138+
),
156139
),
140+
).applyConstraint(
141+
top: cId('base').bottom,
142+
centerHorizontalTo: cId('data$i'),
157143
),
144+
Container(
145+
color: Colors.blue,
158146
).applyConstraint(
159-
bottom: parent.bottom.margin(15),
160-
centerHorizontalTo: cId('data$i'),
147+
outTopCenterTo: cId('data$current'),
148+
top: parent.top,
149+
width: 1,
150+
height: matchConstraint,
161151
),
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++)
152+
CustomPaint(
153+
painter: PolylinePainter(polylineData),
154+
).offPaint().applyConstraint(
155+
width: matchParent,
156+
height: matchParent,
157+
eIndex: 0,
158+
),
159+
for (int i = 0; i < compareData.length; i++)
160+
Container(
161+
decoration: BoxDecoration(
162+
color: Colors.white,
163+
borderRadius: const BorderRadius.all(Radius.circular(10)),
164+
border: Border.all(
165+
width: 1,
166+
color: Colors.green,
167+
),
168+
),
169+
).applyConstraint(
170+
size: 10,
171+
bottomCenterTo: cId('data$i')
172+
.bottomMargin((compareData[i] / maxValue) * 400),
173+
translate: const Offset(0, 0.5),
174+
percentageTranslate: true,
175+
callback: (_, rect) {
176+
polylineData[i] = rect;
177+
},
178+
),
178179
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,
180+
decoration: const BoxDecoration(
181+
color: Colors.blue,
182+
borderRadius: BorderRadius.all(Radius.circular(4)),
183+
),
184+
child: Text(
185+
'${data[current]}',
186+
style: const TextStyle(
187+
color: Colors.white,
185188
),
186189
),
190+
padding: const EdgeInsets.all(5),
187191
).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)),
192+
outTopCenterTo: cId('data$current').bottomMargin(33),
201193
),
202-
child: Text(
203-
'${data[current]}',
204-
style: const TextStyle(
205-
color: Colors.white,
194+
Container(
195+
decoration: const BoxDecoration(
196+
color: Colors.grey,
197+
borderRadius: BorderRadius.all(Radius.circular(4)),
206198
),
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,
199+
child: Text(
200+
'${compareData[current]}',
201+
style: const TextStyle(
202+
color: Colors.white,
203+
),
221204
),
205+
padding: const EdgeInsets.all(5),
206+
).applyConstraint(
207+
outTopCenterTo: cId('data$current').bottomMargin(65),
222208
),
223-
padding: const EdgeInsets.all(5),
224-
).applyConstraint(
225-
outTopCenterTo: cId('data$current').bottomMargin(65),
226-
),
227-
],
209+
],
210+
),
211+
scrollDirection: Axis.horizontal,
228212
),
229-
scrollDirection: Axis.horizontal,
230213
),
231214
);
232215
}

0 commit comments

Comments
 (0)