From 61da09ade5afc3ab340d514d581fa48a1208dcf1 Mon Sep 17 00:00:00 2001 From: Scott Murray Date: Thu, 29 Dec 2022 01:39:03 -0500 Subject: 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 Change-Id: I45a15e2c4c9aa835745c754952979cda8baa90fa --- lib/HomePage.dart | 533 +++++++++------------------------------- lib/provider.dart | 28 +-- lib/widgets/fuel_and_speed.dart | 37 ++- lib/widgets/weather.dart | 46 ++-- 4 files changed, 166 insertions(+), 478 deletions(-) (limited to 'lib') diff --git a/lib/HomePage.dart b/lib/HomePage.dart index b6a0349..532a1a1 100644 --- a/lib/HomePage.dart +++ b/lib/HomePage.dart @@ -1,21 +1,14 @@ // SPDX-License-Identifier: Apache-2.0 import 'package:dashboard_app/Tire_pressure.dart'; -import 'package:dashboard_app/drawArrow.dart'; -import 'package:dashboard_app/provider.dart'; import 'package:dashboard_app/size.dart'; import 'package:dashboard_app/widgets/child_lock.dart'; import 'package:dashboard_app/widgets/fuel_and_speed.dart'; import 'package:dashboard_app/widgets/weather.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:latlng/latlng.dart'; - - import 'Kuksa-server/vehicle_provider.dart'; - class HomePage extends ConsumerStatefulWidget { const HomePage({Key? key}) : super(key: key); @@ -28,442 +21,150 @@ class _HomePageState extends ConsumerState { Widget build(BuildContext context) { SizeConfig().init(context); final vehicle = ref.watch(vehicleSignalProvider); - LatLng pos = LatLng(vehicle.currentLatitude, vehicle.currentLongitude); - - DateTime _now = ref.watch(DateTimeProvider); - - return Scaffold( backgroundColor: Colors.black, - body: OrientationBuilder( - builder: (context, orientation) { - if (orientation == Orientation.landscape) { - return Stack( + body: Stack( + children: [ + Padding( + padding: EdgeInsets.fromLTRB( + SizeConfig.safeBlockHorizontal * 3, + SizeConfig.safeBlockVertical * 3, + SizeConfig.safeBlockHorizontal * 3, + SizeConfig.safeBlockVertical), + child: Column( children: [ - SizedBox( - width: MediaQuery.of(context).size.width, - height: MediaQuery.of(context).size.height, - child: Container( - color: Colors.black, + SizedBox(height: SizeConfig.safeBlockVertical), + Flexible( + flex: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, + children: [], ), ), - - - - - Positioned( - right: SizeConfig.safeBlockHorizontal * 41, - top: SizeConfig.safeBlockVertical * 58, - child: ChildLockStatus( - isChildLockActiveLeft: vehicle.isChildLockActiveLeft, - isChildLockActiveRight: vehicle.isChildLockActiveRight), - ), - - Positioned( - top: SizeConfig.safeBlockVertical * 18, - right: SizeConfig.safeBlockHorizontal * 38, - child: Column( - + SizedBox(height: SizeConfig.safeBlockVertical), + Flexible( + flex: 2, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - TirePressure( - tname: 'L Front Tire', - tpress: vehicle.frontLeftTP, - mainAxisAlignment: MainAxisAlignment.end, - crossAxisAlignment: CrossAxisAlignment.end, - ), - Container( - height: SizeConfig.safeBlockVertical * 10, - width: SizeConfig.safeBlockHorizontal * 12, - child: CustomPaint( - painter: Arrowpaint2(), + Flexible( + flex: 1, + child: weather( + insideTemperatue: vehicle.insideTemperature, + outsideTempearure: vehicle.outsideTemperature, ), - ) - ], - ), - ), - Positioned( - top: SizeConfig.safeBlockVertical * 65, - right: SizeConfig.safeBlockHorizontal * 38, - child: Column( - - children: [ - RotatedBox( - quarterTurns: 2, - child: Container( - height: SizeConfig.safeBlockVertical * 10, - width: SizeConfig.safeBlockHorizontal * 12, - child: CustomPaint( - painter: Arrowpaint(), - ), - ), - ), - TirePressure( - tname: 'L Rear Tire', - tpress: vehicle.rearLeftTP, - crossAxisAlignment: CrossAxisAlignment.end, - mainAxisAlignment: MainAxisAlignment.start, - ), - ], - ), - ), - Positioned( - top: SizeConfig.safeBlockVertical * 18, - right: SizeConfig.safeBlockHorizontal * 7, - child: Column( - children: [ - TirePressure( - tname: 'R Front Tire', - tpress: vehicle.frontRightTP, - mainAxisAlignment: MainAxisAlignment.end, - crossAxisAlignment: CrossAxisAlignment.start, ), - Container( - height: SizeConfig.safeBlockVertical * 10, - width: SizeConfig.safeBlockHorizontal * 12, - child: CustomPaint( - painter: Arrowpaint(), - ), + Flexible( + flex: 2, + child: SpeedAndFuel( + fuel: vehicle.fuelLevel, speed: vehicle.speed), ), ], ), ), - Positioned( - top: SizeConfig.safeBlockVertical * 65, - right: SizeConfig.safeBlockHorizontal * 7, - child: Column( - children: [ - RotatedBox( - quarterTurns: 2, - child: Container( - height: SizeConfig.safeBlockVertical * 10, - width: SizeConfig.safeBlockHorizontal * 12, - child: CustomPaint( - painter: Arrowpaint2(), + Flexible( + flex: 11, + child: Container( + //color: Colors.red, + child: Row(children: [ + Spacer(), + Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container(height: SizeConfig.safeBlockVertical * 6), + TirePressure( + tname: 'Left Front', + tpress: vehicle.frontLeftTP, + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, ), - ), + Spacer(), + ChildLockStatus( + isChildLockActiveLeft: + vehicle.isChildLockActiveLeft, + isChildLockActiveRight: + vehicle.isChildLockActiveRight), + Spacer(), + TirePressure( + tname: 'Left Rear', + tpress: vehicle.rearLeftTP, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.end, + ), + Container( + height: SizeConfig.safeBlockVertical * 10), + ], ), - TirePressure( - tname: 'R Rear Tire', - tpress: vehicle.rearRightTP, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, + Image.asset( + 'images/car_img.png', ), - ], - ), - ), - Positioned( - top: SizeConfig.safeBlockVertical * 20, - right: SizeConfig.blockSizeHorizontal * 13, - bottom: SizeConfig.blockSizeVertical * 20, - child: SizedBox( - height: SizeConfig.screenHeight * 0.6, - width: SizeConfig.screenWidth * 0.30, - child: AnimatedContainer( - duration: Duration(milliseconds: 10), - child: Image.asset('images/car_img.png'), - ), - ), - ), - - Positioned( - top: SizeConfig.safeBlockVertical * 7, - left: SizeConfig.safeBlockHorizontal * 2, - bottom: SizeConfig.safeBlockVertical * 4, - child: Container( - width: SizeConfig.screenWidth / 2, - height: SizeConfig.screenHeight * 0.75, - child: Column( + Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - Rpm(rpm: vehicle.rpm), - - Column( + Container(height: SizeConfig.safeBlockVertical * 6), + TirePressure( + tname: 'Right Front', + tpress: vehicle.frontRightTP, + mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'Avg. Fuel Consumtion', - style: SizeConfig.smallnormalfont, - ), - Text( - vehicle.fuelRate.toString() + ' KM/Litre', - style: SizeConfig.smallnormalfont, - ), - ], ), - // ignore: prefer_const_constructors - weather( - insideTemperatue: vehicle.insideTemperature, - outsideTempearure: vehicle.outsideTemperature, + Spacer(), + ChildLockStatus( + isChildLockActiveLeft: + vehicle.isChildLockActiveLeft, + isChildLockActiveRight: + vehicle.isChildLockActiveRight), + Spacer(), + TirePressure( + tname: 'Right Rear', + tpress: vehicle.rearRightTP, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, ), - SpeedAndFuel( - fuel: vehicle.fuelLevel, speed: vehicle.speed), + Container( + height: SizeConfig.safeBlockVertical * 10), ], ), - )) - ], - ); - } - //--------------------------Portrait mode ------------------------------------------------ - else { - return Stack( - children: [ - Positioned( - top: 0, - bottom: 0, - left: 0, - right: 0, - child: Padding( - padding: EdgeInsets.fromLTRB( - SizeConfig.safeBlockHorizontal * 2, - SizeConfig.safeBlockVertical * 2, - SizeConfig.safeBlockHorizontal * 2, - 0), - - child: Column( - children: [ - Flexible(flex: 1, child: SizedBox()), - SizedBox( - height: SizeConfig.safeBlockVertical, - ), - Flexible( - flex: 1, - child: Row( - mainAxisAlignment: MainAxisAlignment.end, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - ], - ), - ), - - SizedBox( - height: SizeConfig.safeBlockVertical, - ), - Flexible( - flex: 2, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Flexible( - flex: 1, - child: weather( - insideTemperatue: vehicle.insideTemperature, - outsideTempearure: - vehicle.outsideTemperature, - ), - ), - Flexible( - flex: 2, - child: SpeedAndFuel( - fuel: vehicle.fuelLevel, - speed: vehicle.speed), - ), - ], - ), - ), - SizedBox( - height: SizeConfig.safeBlockVertical * 6, - ), - Flexible( - flex: 5, - child: Container( - - - // color: Colors.red, - height: SizeConfig.screenHeight * 0.6, - width: SizeConfig.screenWidth * 0.53, - child: Stack( - children: [ - Positioned( - top: 0, - left: 0, - child: Column( - mainAxisAlignment: - MainAxisAlignment.start, - crossAxisAlignment: - CrossAxisAlignment.end, - children: [ - TirePressure( - tname: 'L Front Tire', - tpress: vehicle.frontLeftTP, - mainAxisAlignment: - MainAxisAlignment.end, - crossAxisAlignment: - CrossAxisAlignment.end, - ), - Container( - height: - SizeConfig.safeBlockVertical * 6, - width: - SizeConfig.safeBlockHorizontal * - 12, - child: CustomPaint( - painter: Arrowpaint2(), - ), - ), - ], - ), - ), - Positioned( - bottom: 0, - left: 0, - child: Column( - children: [ - ChildLockStatus( - isChildLockActiveLeft: - vehicle.isChildLockActiveLeft, - isChildLockActiveRight: - vehicle.isChildLockActiveRight), - RotatedBox( - quarterTurns: 2, - child: Container( - height: - SizeConfig.safeBlockVertical * - 6, - width: - SizeConfig.safeBlockHorizontal * - 12, - child: CustomPaint( - painter: Arrowpaint(), - ), - ), - ), - TirePressure( - tname: 'L Rear Tire', - tpress: vehicle.rearLeftTP, - mainAxisAlignment: - MainAxisAlignment.start, - crossAxisAlignment: - CrossAxisAlignment.end, - ), - ], - ), - ), - Positioned( - top: 0, - bottom: 0, - left: SizeConfig.safeBlockHorizontal * 12, - right: SizeConfig.safeBlockHorizontal * 12, - child: SizedBox( - - child: AnimatedContainer( - duration: Duration(milliseconds: 10), - child: Image.asset( - 'images/car_img.png', - fit: BoxFit.fill, - ), - ), - ), - ), - Positioned( - right: 0, - top: 0, - child: Column( - children: [ - TirePressure( - tname: 'R Front Tire', - tpress: vehicle.frontRightTP, - mainAxisAlignment: - MainAxisAlignment.end, - crossAxisAlignment: - CrossAxisAlignment.start, - ), - Container( - height: - SizeConfig.safeBlockVertical * 6, - width: - SizeConfig.safeBlockHorizontal * - 12, - child: CustomPaint( - painter: Arrowpaint(), - ), - ), - ], - ), - ), - Positioned( - bottom: 0, - right: 0, - child: Column( - children: [ - ChildLockStatus( - isChildLockActiveLeft: - vehicle.isChildLockActiveLeft, - isChildLockActiveRight: - vehicle.isChildLockActiveRight), - RotatedBox( - quarterTurns: 2, - child: Container( - height: - SizeConfig.safeBlockVertical * - 6, - width: - SizeConfig.safeBlockHorizontal * - 12, - child: CustomPaint( - painter: Arrowpaint2(), - ), - ), - ), - TirePressure( - tname: 'R Rear Tire', - tpress: vehicle.rearRightTP, - mainAxisAlignment: - MainAxisAlignment.start, - crossAxisAlignment: - CrossAxisAlignment.start, - ), - ], - ), - ), - ], + Spacer(), + ]), + ), + ), + Flexible( + flex: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Flexible( + flex: 1, + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Fuel Consumption', + style: SizeConfig.smallnormalfont2, ), - ), - ), - SizedBox( - height: SizeConfig.safeBlockVertical, - ), - Flexible( - flex: 1, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - Flexible( - flex: 1, - child: Column( - mainAxisAlignment: MainAxisAlignment.end, - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - 'Avg. Fuel Consumtion', - style: SizeConfig.smallnormalfont2, - ), - Text( - vehicle.fuelRate.toString() + - ' KM/Litre', - style: SizeConfig.smallnormalfont, - ), - ], - ), - ), - Flexible(flex: 1, child: Rpm(rpm: vehicle.rpm)), - ], - ), + Text( + vehicle.fuelRate.toString() + ' km/Litre', + style: SizeConfig.smallnormalfont, + ), + ], ), - - ], - ), + ), + Flexible(flex: 1, child: Rpm(rpm: vehicle.rpm)), + ], ), - ) + ), ], - ); - - } - }, + ), + ), + ], )); } } diff --git a/lib/provider.dart b/lib/provider.dart index 4c9ed0a..463e743 100644 --- a/lib/provider.dart +++ b/lib/provider.dart @@ -5,37 +5,19 @@ import 'dart:math'; import 'package:flutter_riverpod/flutter_riverpod.dart'; -final fuelProvider = StateNotifierProvider((ref) => - fuel(), +final fuelProvider = StateNotifierProvider( + (ref) => fuel(), ); -class fuel extends StateNotifier{ +class fuel extends StateNotifier { late Timer timer; - fuel() : super(0.2){ - + fuel() : super(0.2) { Timer.periodic(Duration(seconds: 5), (timer) { double num = Random().nextInt(100).toDouble(); update(num); }); } - void update(value){ - state = value; - } -} - -final DateTimeProvider = StateNotifierProvider((ref) => - datetime(), -); - -class datetime extends StateNotifier{ - datetime() : super(DateTime.now()){ - - Timer.periodic(Duration(seconds: 30), (timer) { - DateTime _now = DateTime.now(); - update(_now); - }); - } - void update(value){ + void update(value) { state = value; } } 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, + ), ], ) ], -- cgit