From: Scott Murray Date: Fri, 5 Jan 2024 01:22:28 +0000 (-0500) Subject: Rotate dashboard gauges X-Git-Tag: 17.90.0~4 X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?a=commitdiff_plain;h=ee592b5048543951f712c0abb997a6e97c036544;p=apps%2Fflutter-ics-homescreen.git 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 --- 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 ); } } -