Skip to content

Commit ea01e93

Browse files
FeichtmeierFeichtmeier
committed
Add fake today chart
1 parent 9da5581 commit ea01e93

File tree

7 files changed

+434
-204
lines changed

7 files changed

+434
-204
lines changed

‎lib/constants.dart‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:yaru/constants.dart';
3+
14
const kAppName = 'pulse';
25
const kAppTitle = 'Pulse';
36

@@ -7,3 +10,10 @@ const kFavLocationsFileName = 'favlocations.json';
710
const kLastLocation = 'lastLocation';
811

912
const kPaneWidth = 240.0;
13+
14+
const kPagePadding = EdgeInsets.only(
15+
top: kYaruPagePadding,
16+
left: 2 * kYaruPagePadding,
17+
right: 2 * kYaruPagePadding,
18+
bottom: 2 * kYaruPagePadding,
19+
);

‎lib/src/weather/view/forecast_chart.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ class ForeCastChart extends StatelessWidget {
1919
Widget build(BuildContext context) {
2020
return Center(
2121
child: Container(
22-
margin: const EdgeInsets.all(2 * kYaruPagePadding),
22+
margin: kPagePadding,
2323
decoration: BoxDecoration(
2424
borderRadius: BorderRadius.circular(kYaruContainerRadius),
2525
color: context.theme.colorScheme.surface.withOpacity(0.3),
2626
),
2727
height:
28-
context.mq.size.height - kYaruTitleBarHeight - 4 * kYaruPagePadding,
28+
context.mq.size.height - kYaruTitleBarHeight - 3 * kYaruPagePadding,
2929
width: context.mq.size.width - kPaneWidth - 2 * kYaruPagePadding,
3030
child: Padding(
3131
padding: const EdgeInsets.symmetric(vertical: kYaruPagePadding),

‎lib/src/weather/view/today_chart.dart‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
import 'package:fl_chart/fl_chart.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:watch_it/watch_it.dart';
4+
import 'package:yaru/constants.dart';
5+
6+
import '../../build_context_x.dart';
7+
import '../weather_model.dart';
8+
9+
class LineChartSample2 extends StatefulWidget with WatchItStatefulWidgetMixin {
10+
const LineChartSample2({super.key});
11+
12+
@override
13+
State<LineChartSample2> createState() => _LineChartSample2State();
14+
}
15+
16+
class _LineChartSample2State extends State<LineChartSample2> {
17+
List<Color> gradientColors = [
18+
Colors.cyan,
19+
Colors.blue,
20+
];
21+
22+
bool showAvg = false;
23+
24+
@override
25+
Widget build(BuildContext context) {
26+
// ignore: unused_local_variable
27+
final todayForeCast =
28+
watchPropertyValue((WeatherModel m) => m.todayForeCast);
29+
30+
return ClipRRect(
31+
borderRadius: BorderRadius.circular(kYaruContainerRadius),
32+
child: Stack(
33+
children: <Widget>[
34+
LineChart(
35+
showAvg ? avgData() : mainData(),
36+
),
37+
Positioned(
38+
right: 25,
39+
bottom: 25,
40+
child: FloatingActionButton(
41+
onPressed: () {
42+
setState(() {
43+
showAvg = !showAvg;
44+
});
45+
},
46+
child: Text(
47+
'avg',
48+
style: TextStyle(
49+
fontSize: 12,
50+
color: showAvg ? Colors.white.withOpacity(0.5) : Colors.white,
51+
),
52+
),
53+
),
54+
),
55+
],
56+
),
57+
);
58+
}
59+
60+
Widget bottomTitleWidgets(double value, TitleMeta meta) {
61+
const style = TextStyle(
62+
fontWeight: FontWeight.bold,
63+
fontSize: 16,
64+
);
65+
Widget text;
66+
switch (value.toInt()) {
67+
case 2:
68+
text = const Text('MAR', style: style);
69+
break;
70+
case 5:
71+
text = const Text('JUN', style: style);
72+
break;
73+
case 8:
74+
text = const Text('SEP', style: style);
75+
break;
76+
default:
77+
text = const Text('', style: style);
78+
break;
79+
}
80+
81+
return SideTitleWidget(
82+
axisSide: meta.axisSide,
83+
child: text,
84+
);
85+
}
86+
87+
Widget leftTitleWidgets(double value, TitleMeta meta) {
88+
const style = TextStyle(
89+
fontWeight: FontWeight.bold,
90+
fontSize: 15,
91+
);
92+
String text;
93+
switch (value.toInt()) {
94+
case 1:
95+
text = '10K';
96+
break;
97+
case 3:
98+
text = '30k';
99+
break;
100+
case 5:
101+
text = '50k';
102+
break;
103+
default:
104+
return Container();
105+
}
106+
107+
return Text(text, style: style, textAlign: TextAlign.left);
108+
}
109+
110+
LineChartData mainData() {
111+
return LineChartData(
112+
gridData: FlGridData(
113+
show: false,
114+
drawVerticalLine: true,
115+
horizontalInterval: 1,
116+
verticalInterval: 1,
117+
getDrawingHorizontalLine: (value) {
118+
return FlLine(
119+
color: context.theme.colorScheme.onSurface,
120+
strokeWidth: 1,
121+
);
122+
},
123+
getDrawingVerticalLine: (value) {
124+
return FlLine(
125+
color: context.theme.colorScheme.onSurface,
126+
strokeWidth: 1,
127+
);
128+
},
129+
),
130+
titlesData: FlTitlesData(
131+
show: false,
132+
rightTitles: const AxisTitles(
133+
sideTitles: SideTitles(showTitles: false),
134+
),
135+
topTitles: const AxisTitles(
136+
sideTitles: SideTitles(showTitles: false),
137+
),
138+
bottomTitles: AxisTitles(
139+
sideTitles: SideTitles(
140+
showTitles: true,
141+
reservedSize: 0,
142+
interval: 1,
143+
getTitlesWidget: bottomTitleWidgets,
144+
),
145+
),
146+
leftTitles: AxisTitles(
147+
sideTitles: SideTitles(
148+
showTitles: false,
149+
interval: 1,
150+
getTitlesWidget: leftTitleWidgets,
151+
reservedSize: 0,
152+
),
153+
),
154+
),
155+
borderData: FlBorderData(
156+
show: false,
157+
border: Border.all(color: const Color(0xff37434d)),
158+
),
159+
minX: 0,
160+
maxX: 11,
161+
minY: 0,
162+
maxY: 6,
163+
lineBarsData: [
164+
LineChartBarData(
165+
spots: const [
166+
FlSpot(0, 3),
167+
FlSpot(2.6, 2),
168+
FlSpot(4.9, 5),
169+
FlSpot(6.8, 3.1),
170+
FlSpot(8, 4),
171+
FlSpot(9.5, 3),
172+
FlSpot(11, 4),
173+
],
174+
isCurved: true,
175+
gradient: LinearGradient(
176+
colors: gradientColors,
177+
),
178+
barWidth: 5,
179+
isStrokeCapRound: true,
180+
dotData: const FlDotData(
181+
show: false,
182+
),
183+
belowBarData: BarAreaData(
184+
show: true,
185+
gradient: LinearGradient(
186+
colors: gradientColors
187+
.map((color) => color.withOpacity(0.3))
188+
.toList(),
189+
),
190+
),
191+
),
192+
],
193+
);
194+
}
195+
196+
LineChartData avgData() {
197+
return LineChartData(
198+
lineTouchData: const LineTouchData(enabled: false),
199+
gridData: FlGridData(
200+
show: false,
201+
drawHorizontalLine: true,
202+
verticalInterval: 1,
203+
horizontalInterval: 1,
204+
getDrawingVerticalLine: (value) {
205+
return const FlLine(
206+
color: Color(0xff37434d),
207+
strokeWidth: 1,
208+
);
209+
},
210+
getDrawingHorizontalLine: (value) {
211+
return const FlLine(
212+
color: Color(0xff37434d),
213+
strokeWidth: 1,
214+
);
215+
},
216+
),
217+
titlesData: FlTitlesData(
218+
show: false,
219+
bottomTitles: AxisTitles(
220+
sideTitles: SideTitles(
221+
showTitles: false,
222+
reservedSize: 30,
223+
getTitlesWidget: bottomTitleWidgets,
224+
interval: 1,
225+
),
226+
),
227+
leftTitles: AxisTitles(
228+
sideTitles: SideTitles(
229+
showTitles: false,
230+
getTitlesWidget: leftTitleWidgets,
231+
reservedSize: 42,
232+
interval: 1,
233+
),
234+
),
235+
topTitles: const AxisTitles(
236+
sideTitles: SideTitles(showTitles: false),
237+
),
238+
rightTitles: const AxisTitles(
239+
sideTitles: SideTitles(showTitles: false),
240+
),
241+
),
242+
borderData: FlBorderData(
243+
show: false,
244+
border: Border.all(color: const Color(0xff37434d)),
245+
),
246+
minX: 0,
247+
maxX: 11,
248+
minY: 0,
249+
maxY: 6,
250+
lineBarsData: [
251+
LineChartBarData(
252+
spots: const [
253+
FlSpot(0, 3.44),
254+
FlSpot(2.6, 3.44),
255+
FlSpot(4.9, 3.44),
256+
FlSpot(6.8, 3.44),
257+
FlSpot(8, 3.44),
258+
FlSpot(9.5, 3.44),
259+
FlSpot(11, 3.44),
260+
],
261+
isCurved: true,
262+
gradient: LinearGradient(
263+
colors: [
264+
ColorTween(begin: gradientColors[0], end: gradientColors[1])
265+
.lerp(0.2)!,
266+
ColorTween(begin: gradientColors[0], end: gradientColors[1])
267+
.lerp(0.2)!,
268+
],
269+
),
270+
barWidth: 5,
271+
isStrokeCapRound: true,
272+
dotData: const FlDotData(
273+
show: false,
274+
),
275+
belowBarData: BarAreaData(
276+
show: true,
277+
gradient: LinearGradient(
278+
colors: [
279+
ColorTween(begin: gradientColors[0], end: gradientColors[1])
280+
.lerp(0.2)!
281+
.withOpacity(0.1),
282+
ColorTween(begin: gradientColors[0], end: gradientColors[1])
283+
.lerp(0.2)!
284+
.withOpacity(0.1),
285+
],
286+
),
287+
),
288+
),
289+
],
290+
);
291+
}
292+
}

0 commit comments

Comments
 (0)