summaryrefslogtreecommitdiffstats
path: root/lib/page_dashboard.dart
diff options
context:
space:
mode:
Diffstat (limited to 'lib/page_dashboard.dart')
-rw-r--r--lib/page_dashboard.dart167
1 files changed, 95 insertions, 72 deletions
diff --git a/lib/page_dashboard.dart b/lib/page_dashboard.dart
index 09d1eef..c354415 100644
--- a/lib/page_dashboard.dart
+++ b/lib/page_dashboard.dart
@@ -4,6 +4,7 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_homescreen/layout_size_helper.dart';
+// The Dashboard page.
class DashboardPage extends StatefulWidget {
DashboardPage({Key? key}) : super(key: key);
@@ -26,13 +27,15 @@ class _DashboardPageState extends State<DashboardPage> {
Duration(milliseconds: 10),
(Timer timer) {
setState(() {
- double now = DateTime.now().millisecondsSinceEpoch / 1000;
+ double now = DateTime.now().millisecondsSinceEpoch / 2000;
speed = 50 + 40 * sin(now);
rpm = 0.5 + sin(now) / 3.0;
fuel = 0.6 + cos(now) / 4.0;
});
},
);
+ // Animate the values for the demo.
+ // Eventually, we will get the state of the car from the API.
super.initState();
}
@@ -53,89 +56,69 @@ class _DashboardPageState extends State<DashboardPage> {
colors: [Colors.teal.shade900, Colors.grey.shade900])),
constraints: BoxConstraints.expand(),
alignment: Alignment.center,
- child: Column(
+ child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
- Text(
- '${speed.floor()} kpm',
- style: Theme.of(context).textTheme.headline2,
+ Column(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: [
+ Container(
+ height: sizeHelper.largeIconSize * 1,
+ width: sizeHelper.largeIconSize * 2,
+ decoration: BoxDecoration(
+ border: Border.all(
+ color: Theme.of(context).primaryColorLight,
+ width: sizeHelper.defaultBorder,
+ ),
+ borderRadius: BorderRadius.all(
+ Radius.circular(sizeHelper.largeIconSize / 2.0))),
+ child: Center(
+ child: Text(
+ '${speed.floor()} kpm',
+ style: Theme.of(context).textTheme.headline2,
+ ),
+ ),
+ ),
+ _RPMWidget(rpm),
+ _FuelWidget(fuel),
+ ],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
+ crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- Expanded(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- crossAxisAlignment: CrossAxisAlignment.end,
- children: [
- _TireWidget('Left front tire', 21, CrossAxisAlignment.end),
- SizedBox(
- height: sizeHelper.largeIconSize,
- ),
- _TireWidget('Left rear tire', 23, CrossAxisAlignment.end),
- ],
- ),
+ Column(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ crossAxisAlignment: CrossAxisAlignment.end,
+ children: [
+ _TireWidget('Left front tire', 21, CrossAxisAlignment.end),
+ _TireWidget('Left rear tire', 23, CrossAxisAlignment.end),
+ ],
),
Image.asset(
'images/HMI_Dashboard_Car_720.png',
- width: sizeHelper.largeIconSize,
+ width: 2.0 * sizeHelper.largeIconSize,
fit: BoxFit.contain,
),
- Expanded(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- _TireWidget(
- 'Right front tire', 21, CrossAxisAlignment.start),
- SizedBox(
- height: sizeHelper.largeIconSize,
- ),
- _TireWidget(
- 'Right rear tire', 23, CrossAxisAlignment.start),
- ],
- ),
+ Column(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ _TireWidget('Right front tire', 21, CrossAxisAlignment.start),
+ _TireWidget('Right rear tire', 23, CrossAxisAlignment.start),
+ ],
),
],
),
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- children: [
- _RPMWidget(rpm),
- _FuelWidget(fuel),
- ],
- )
],
),
);
}
}
-class _TireWidget extends StatelessWidget {
- String label;
- int value;
- CrossAxisAlignment crossAlign;
-
- _TireWidget(this.label, this.value, this.crossAlign);
-
- @override
- Widget build(BuildContext context) {
- var sizeHelper = LayoutSizeHelper(context);
- return Column(crossAxisAlignment: crossAlign, children: [
- Text(
- label,
- style: Theme.of(context).textTheme.caption,
- ),
- Text(
- '$value PSI',
- style: Theme.of(context).textTheme.headline5,
- )
- ]);
- }
-}
-
+// The RPM indicator.
class _RPMWidget extends StatelessWidget {
- double rpm;
+ final double rpm;
_RPMWidget(this.rpm);
@@ -150,13 +133,16 @@ class _RPMWidget extends StatelessWidget {
style: Theme.of(context).textTheme.headline4,
),
Container(
- height: sizeHelper.largeIconSize,
- width: sizeHelper.largeIconSize,
+ height: sizeHelper.largeIconSize * 1.5,
+ width: sizeHelper.largeIconSize * 1.5,
child: RotatedBox(
quarterTurns: 2,
child: CircularProgressIndicator(
value: rpm,
- strokeWidth: sizeHelper.largeIconSize / 4.0,
+ color: HSLColor.fromColor(Colors.redAccent)
+ .withSaturation(rpm)
+ .toColor(),
+ strokeWidth: sizeHelper.largeIconSize / 2.0,
semanticsLabel: 'RPM indicator',
),
),
@@ -166,8 +152,9 @@ class _RPMWidget extends StatelessWidget {
}
}
+// The fuel indicator.
class _FuelWidget extends StatelessWidget {
- double fuel;
+ final double fuel;
_FuelWidget(this.fuel);
@@ -176,16 +163,26 @@ class _FuelWidget extends StatelessWidget {
var sizeHelper = LayoutSizeHelper(context);
return Row(
children: [
- Text(
- 'Fuel',
- style: Theme.of(context).textTheme.headline4,
+ Container(
+ height: sizeHelper.largeIconSize / 4.0,
+ width: sizeHelper.largeIconSize / 2.0,
+ child: Center(
+ child: Text(
+ 'Fuel',
+ style: Theme.of(context).textTheme.headline4,
+ ),
+ ),
),
Container(
height: sizeHelper.largeIconSize / 4.0,
- width: sizeHelper.largeIconSize,
- margin: EdgeInsets.all(sizeHelper.largePadding),
+ width: sizeHelper.largeIconSize * 1.5,
+ margin: EdgeInsets.fromLTRB(
+ 0, sizeHelper.largePadding, 0, sizeHelper.largePadding),
child: LinearProgressIndicator(
value: fuel,
+ color: HSLColor.fromColor(Colors.blueAccent)
+ .withSaturation(fuel)
+ .toColor(),
semanticsLabel: 'RPM indicator',
),
)
@@ -193,3 +190,29 @@ class _FuelWidget extends StatelessWidget {
);
}
}
+
+// The small indicator for the state of each tire.
+class _TireWidget extends StatelessWidget {
+ final String label;
+ final int value;
+ final CrossAxisAlignment crossAlign;
+
+ _TireWidget(this.label, this.value, this.crossAlign);
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ crossAxisAlignment: crossAlign,
+ children: [
+ Text(
+ label,
+ style: Theme.of(context).textTheme.headline6,
+ ),
+ Text(
+ '$value PSI',
+ style: Theme.of(context).textTheme.headline4,
+ ),
+ ],
+ );
+ }
+}