From ee592b5048543951f712c0abb997a6e97c036544 Mon Sep 17 00:00:00 2001 From: Scott Murray Date: Thu, 4 Jan 2024 20:22:28 -0500 Subject: Rotate dashboard gauges Use Transform.rotate to rotate the CircularProgressIndicator and associated custom painter widgets used for the speed, rpm, and fuel gauges on the dashboard page by 180 degrees. Having the progress bars start from the six o'clock position looks more like existing systems and should better match user expectations. Future work should likely involve an investigation into using something other than the highly limited CircularProgressIndicator widget. Bug-AGL: SPEC-5043 Change-Id: I1bbc3abd2eb4ca362bf92cd06495a3b0a5154843 Signed-off-by: Scott Murray --- .../dashboard/widgets/circle_indicator.dart | 222 +++++++++++---------- 1 file changed, 113 insertions(+), 109 deletions(-) (limited to 'lib/presentation/screens') diff --git a/lib/presentation/screens/dashboard/widgets/circle_indicator.dart b/lib/presentation/screens/dashboard/widgets/circle_indicator.dart index e3a3ba5..e4be5e7 100644 --- a/lib/presentation/screens/dashboard/widgets/circle_indicator.dart +++ b/lib/presentation/screens/dashboard/widgets/circle_indicator.dart @@ -1,3 +1,4 @@ +import 'dart:math'; import 'package:flutter_ics_homescreen/export.dart'; import 'custom_circle.dart'; @@ -44,55 +45,58 @@ class RPMProgressIndicatorState extends ConsumerState child: Stack( alignment: Alignment.center, children: [ - Text( rpm.toStringAsFixed(0), style: GoogleFonts.brunoAce( textStyle: const TextStyle(color: Colors.white, fontSize: 44), ), ), - Stack( - children: [ - if (rpm > 6500) - SizedBox( - height: 200, - width: 200, - child: CircularProgressIndicator( - strokeWidth: 12, - backgroundColor: Colors.transparent, - //value: controller.value, - valueColor: const AlwaysStoppedAnimation( - AGLDemoColors.redProgressStrokeColor), - value: rpm * (1 / maxRpm), + Transform.rotate( + angle: pi, + child: Stack( + children: [ + if (rpm > 6500) + SizedBox( + height: 200, + width: 200, + child: CircularProgressIndicator( + strokeWidth: 12, + backgroundColor: Colors.transparent, + //value: controller.value, + valueColor: const AlwaysStoppedAnimation( + AGLDemoColors.redProgressStrokeColor), + value: rpm * (1 / maxRpm), + ), + ), + SizedBox( + height: 200, + width: 200, + child: CircularProgressIndicator( + strokeWidth: 12, + backgroundColor: Colors.transparent, + //value: controller.value, + valueColor: const AlwaysStoppedAnimation( + AGLDemoColors.jordyBlueColor), + value: rpm >= 6500 + ? 6500 * (1 / maxRpm) + : rpm * (1 / maxRpm), + ), + ), + ], + )), + Transform.rotate( + angle: pi, + child: SizedBox( + height: 220, + width: 220, + child: CustomPaint( + foregroundPainter: CirclePainter( + value: rpm, + maxValue: maxRpm.toDouble(), + isRPM: true, ), ), - SizedBox( - height: 200, - width: 200, - child: CircularProgressIndicator( - strokeWidth: 12, - backgroundColor: Colors.transparent, - //value: controller.value, - valueColor: const AlwaysStoppedAnimation( - AGLDemoColors.jordyBlueColor), - value: rpm >= 6500 - ? 6500 * (1 / maxRpm) - : rpm * (1 / maxRpm), - ), - ), - ], - ), - SizedBox( - height: 220, - width: 220, - child: CustomPaint( - foregroundPainter: CirclePainter( - value: rpm, - maxValue: maxRpm.toDouble(), - isRPM: true, - ), - ), - ), + )), ], ), ), @@ -105,8 +109,6 @@ class RPMProgressIndicatorState extends ConsumerState } } - - class SpeedProgressIndicator extends ConsumerStatefulWidget { const SpeedProgressIndicator({super.key}); @@ -145,13 +147,11 @@ class SpeedProgressIndicatorState extends ConsumerState ref.watch(unitStateProvider.select((unit) => unit.distanceUnit)); return Column( children: [ - SizedBox( height: 252, child: Stack( alignment: Alignment.center, children: [ - Text( unit == DistanceUnit.kilometers ? speed.toStringAsFixed(0) @@ -163,30 +163,33 @@ class SpeedProgressIndicatorState extends ConsumerState ), ), ), - SizedBox( - height: 200, - width: 200, - child: CircularProgressIndicator( - strokeWidth: 12, - //backgroundColor: const Color(0xFF2962FF), - //value: controller.value, - value: unit == DistanceUnit.kilometers - ? speed * (1 / maxSpeed) - : (speed * (1 / maxSpeed) * 1.609), - semanticsLabel: 'Speed progress indicator', - ), - ), - SizedBox( - height: 220, - width: 220, - child: CustomPaint( - foregroundPainter: - CirclePainter(value: speed, maxValue: maxSpeed), - ), - ), + Transform.rotate( + angle: pi, + child: SizedBox( + height: 200, + width: 200, + child: CircularProgressIndicator( + strokeWidth: 12, + //backgroundColor: const Color(0xFF2962FF), + //value: controller.value, + value: unit == DistanceUnit.kilometers + ? speed * (1 / maxSpeed) + : (speed * (1 / maxSpeed) * 1.609), + semanticsLabel: 'Speed progress indicator', + ), + )), + Transform.rotate( + angle: pi, + child: SizedBox( + height: 220, + width: 220, + child: CustomPaint( + foregroundPainter: + CirclePainter(value: speed, maxValue: maxSpeed), + ), + )), ], ), - ), Text( unit == DistanceUnit.kilometers ? 'km/h' : 'mph', @@ -239,7 +242,6 @@ class FuelProgressIndicatorState extends ConsumerState child: Stack( alignment: Alignment.center, children: [ - Text( '${(fuelLevel * (1 / maxFuelLevel) * 100).toStringAsFixed(0)}%', style: GoogleFonts.brunoAce( @@ -249,48 +251,51 @@ class FuelProgressIndicatorState extends ConsumerState ), ), ), - Stack( - children: [ - SizedBox( - height: 200, - width: 200, - child: CircularProgressIndicator( - strokeWidth: 12, - backgroundColor: Colors.transparent, - value: fuelLevel >= 12 - ? 12 * (1 / maxFuelLevel) - : fuelLevel * (1 / maxFuelLevel), - valueColor: const AlwaysStoppedAnimation( - AGLDemoColors.redProgressStrokeColor), - ), - ), - if (fuelLevel > 12) - SizedBox( - height: 200, - width: 200, - child: CircularProgressIndicator( - strokeWidth: 12, - backgroundColor: Colors.transparent, - //value: controller.value, - valueColor: const AlwaysStoppedAnimation( - AGLDemoColors.jordyBlueColor), - value: fuelLevel * (1 / maxFuelLevel), + Transform.rotate( + angle: pi, + child: Stack( + children: [ + SizedBox( + height: 200, + width: 200, + child: CircularProgressIndicator( + strokeWidth: 12, + backgroundColor: Colors.transparent, + value: fuelLevel >= 12 + ? 12 * (1 / maxFuelLevel) + : fuelLevel * (1 / maxFuelLevel), + valueColor: const AlwaysStoppedAnimation( + AGLDemoColors.redProgressStrokeColor), + ), ), + if (fuelLevel > 12) + SizedBox( + height: 200, + width: 200, + child: CircularProgressIndicator( + strokeWidth: 12, + backgroundColor: Colors.transparent, + //value: controller.value, + valueColor: const AlwaysStoppedAnimation( + AGLDemoColors.jordyBlueColor), + value: fuelLevel * (1 / maxFuelLevel), + ), + ), + ], + )), + Transform.rotate( + angle: pi, + child: SizedBox( + height: 220, + width: 220, + child: CustomPaint( + foregroundPainter: CirclePainter( + value: fuelLevel.toDouble(), + maxValue: maxFuelLevel, + isFuel: true, + isRPM: false), ), - - ], - ), - SizedBox( - height: 220, - width: 220, - child: CustomPaint( - foregroundPainter: CirclePainter( - value: fuelLevel.toDouble(), - maxValue: maxFuelLevel, - isFuel: true, - isRPM: false), - ), - ), + )), ], ), ), @@ -302,4 +307,3 @@ class FuelProgressIndicatorState extends ConsumerState ); } } - -- cgit 1.2.3-korg