Layout simplifications and tweaks

Changes:
- Remove OrientationBuilder usage and landscape widget layout, as
  it complicates further rework due to not being as easily tested,
  and will be an ongoing maintenance hassle until landscape mode is
  actually required.
- Simplify layout by removing the arrows for tire pressure, and
  replacing the heavy Positioned usage with Row/Columns with some
  alignment directives.
- Swap the fuel and speed gauges to have the speed on the left, as
  that matches the typical cluster postion.
- Correct the aspect ratio of hero car image and increase its size
  to better fill available area.
- Tweaked label alignment and positioning on the temperature widgets
  to better make use of the available space.
- Corrected labels to 'km/h' in a couple of places.

Bug-AGL: SPEC-4660

Signed-off-by: Scott Murray <scott.murray@konsulko.com>
Change-Id: I45a15e2c4c9aa835745c754952979cda8baa90fa

2 files changed, 44 insertions, 39 deletions

diff --git a/lib/widgets/fuel_and_speed.dart b/lib/widgets/fuel_and_speed.dart
index 2ee902e..d5dd902 100644
--- a/lib/widgets/fuel_and_speed.dart
+++ b/lib/widgets/fuel_and_speed.dart
@@ -6,8 +6,6 @@ import 'package:flutter/material.dart';
 import 'package:percent_indicator/circular_percent_indicator.dart';
 import 'package:percent_indicator/linear_percent_indicator.dart';
 
-
-
 class SpeedAndFuel extends StatelessWidget {
   double fuel;
   double speed;
@@ -24,42 +22,41 @@ class SpeedAndFuel extends StatelessWidget {
         children: [
           CircularPercentIndicator(
             radius: SizeConfig.fontsize * 1.6,
-            percent: fuel / 100,
+            percent: speed / 300,
             lineWidth: SizeConfig.fontsize / 2,
-
-            backgroundColor: Colors.lightBlue.shade100,
-            progressColor: fuel < 25
-                ? Colors.redAccent
-                : fuel < 50
-                    ? Colors.orange
-                    : Colors.green,
+            backgroundColor: Color.fromARGB(255, 176, 213, 195),
+            progressColor: Colors.lightBlueAccent,
             animation: true,
             circularStrokeCap: CircularStrokeCap.round,
             animateFromLastPercent: true,
             center: Text(
-              fuel.toString() + ' %',
+              speed.toInt().toString(),
               style: SizeConfig.smallnormalfont,
             ),
             footer: Text(
-              'fuel',
+              'km/h',
               style: SizeConfig.smallnormalfont2,
             ),
           ),
           CircularPercentIndicator(
             radius: SizeConfig.fontsize * 1.6,
-            percent: speed / 300,
+            percent: fuel / 100,
             lineWidth: SizeConfig.fontsize / 2,
-            backgroundColor: Color.fromARGB(255, 176, 213, 195),
-            progressColor: Colors.lightBlueAccent,
+            backgroundColor: Colors.lightBlue.shade100,
+            progressColor: fuel < 25
+                ? Colors.redAccent
+                : fuel < 50
+                    ? Colors.orange
+                    : Colors.green,
             animation: true,
             circularStrokeCap: CircularStrokeCap.round,
             animateFromLastPercent: true,
             center: Text(
-              speed.toString(),
+              fuel.toInt().toString() + ' %',
               style: SizeConfig.smallnormalfont,
             ),
             footer: Text(
-              'Speed in KM/H',
+              'Fuel',
               style: SizeConfig.smallnormalfont2,
             ),
           ),
@@ -83,7 +80,7 @@ class Rpm extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.end,
         children: [
           Text(
-            "Engine Status",
+            "Engine",
             style: SizeConfig.smallnormalfont2,
           ),
           LinearPercentIndicator(
@@ -93,14 +90,14 @@ class Rpm extends StatelessWidget {
             animateFromLastPercent: true,
             animation: true,
             animationDuration: 500,
-            percent: rpm / 8000,
+            percent: rpm > 9000 ? 9000 : rpm / 9000,
             barRadius: Radius.circular(15),
             leading: Text(
               'RPM',
               style: SizeConfig.smallnormalfont,
             ),
             trailing: Text(
-              rpm.toString(),
+              rpm.toInt().toString(),
               style: SizeConfig.smallnormalfont2,
             ),
           ),
diff --git a/lib/widgets/weather.dart b/lib/widgets/weather.dart
index fe31c72..0a593cc 100644
--- a/lib/widgets/weather.dart
+++ b/lib/widgets/weather.dart
@@ -21,55 +21,63 @@ class weather extends StatelessWidget {
         borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical * 2),
       ),
       height: SizeConfig.safeBlockVertical * 20,
-      width: SizeConfig.blockSizeHorizontal * 20,
+      width: SizeConfig.blockSizeHorizontal * 30,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.end,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Flexible(
               flex: 1,
-              child: Text(
-                'Weather',
-                style: SizeConfig.smallnormalfont,
-                textAlign: TextAlign.left,
-              )),
+              child: Row(children: [
+                Text(
+                  'Temperature',
+                  style: SizeConfig.smallnormalfont,
+                  textAlign: TextAlign.left,
+                ),
+                SizedBox(
+                  width: SizeConfig.safeBlockHorizontal * 2,
+                ),
+                SizedBox(
+                  height: SizeConfig.safeBlockVertical * 5,
+                  width: SizeConfig.blockSizeHorizontal * 5,
+                  child: Image.asset(
+                    'images/thermostate.png',
+                    color: Colors.orangeAccent,
+                  ),
+                )
+              ])),
           Flexible(
             flex: 3,
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 SizedBox(
-                    height: SizeConfig.safeBlockVertical * 5,
-                    width: SizeConfig.blockSizeHorizontal * 5,
-                    child: Image.asset(
-                      'images/thermostate.png',
-                      color: Colors.orangeAccent,
-                    )),
-                SizedBox(
                   height: SizeConfig.safeBlockVertical,
                 ),
                 Row(
                   children: [
                     Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
+                        Text('Inside', style: SizeConfig.smallnormalfont2),
                         Text(insideTemperatue.toString() + ' \u00B0',
                             style: SizeConfig.normalfont),
-                        Text('Inside', style: SizeConfig.smallnormalfont2),
                       ],
                     ),
                     SizedBox(
-                      width: SizeConfig.safeBlockHorizontal,
+                      width: SizeConfig.safeBlockHorizontal * 2,
                     ),
                     Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
                         Text(
-                          outsideTempearure.toString() + ' \u00B0',
-                          style: SizeConfig.normalfont,
-                        ),
-                        Text(
                           'Outside',
                           style: SizeConfig.smallnormalfont2,
                         ),
+                        Text(
+                          outsideTempearure.toString() + ' \u00B0',
+                          style: SizeConfig.normalfont,
+                        ),
                       ],
                     )
                   ],