Cleanup and styles

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,
+        ),
+      ],
+    );
+  }
+}