From c14cc6309b5cb4d4e75b2d1e5a899cb385a5ef82 Mon Sep 17 00:00:00 2001 From: Anh Date: Thu, 22 Feb 2024 12:56:41 +0700 Subject: [PATCH] Add setting for progress animation style --- flutter/lib/store.dart | 9 ++++ .../lib/ui/home/benchmark_running_screen.dart | 42 +++++++++++++++---- ...les.dart => infinite_progress_circle.dart} | 8 ++-- flutter/lib/ui/settings/settings_screen.dart | 23 ++++++++++ 4 files changed, 69 insertions(+), 13 deletions(-) rename flutter/lib/ui/home/{progress_circles.dart => infinite_progress_circle.dart} (85%) diff --git a/flutter/lib/store.dart b/flutter/lib/store.dart index 93139dcc3..b54ffa83e 100644 --- a/flutter/lib/store.dart +++ b/flutter/lib/store.dart @@ -29,6 +29,14 @@ class Store extends ChangeNotifier { return value ?? ''; } + int get progressAnimationMode => + _getInt(StoreConstants.progressAnimationMode, 0); + + set progressAnimationMode(int value) { + _storeFromDisk.setInt(StoreConstants.progressAnimationMode, value); + notifyListeners(); + } + BenchmarkRunModeEnum get selectedBenchmarkRunMode { String name = _getString(StoreConstants.selectedBenchmarkRunMode); if (name == '') name = BenchmarkRunModeEnum.performanceOnly.name; @@ -142,6 +150,7 @@ class Store extends ChangeNotifier { } class StoreConstants { + static const progressAnimationMode = 'progressAnimationMode'; static const selectedBenchmarkRunMode = 'selectedBenchmarkRunMode'; static const artificialCPULoadEnabled = 'artificial cpu load enabled'; static const offlineMode = 'offline mode'; diff --git a/flutter/lib/ui/home/benchmark_running_screen.dart b/flutter/lib/ui/home/benchmark_running_screen.dart index 4994622dd..3a90bf901 100644 --- a/flutter/lib/ui/home/benchmark_running_screen.dart +++ b/flutter/lib/ui/home/benchmark_running_screen.dart @@ -4,7 +4,6 @@ import 'dart:math'; import 'package:flutter/material.dart'; import 'package:collection/collection.dart'; -import 'package:mlperfbench/ui/home/dotted_progress_circle.dart'; import 'package:provider/provider.dart'; import 'package:mlperfbench/benchmark/info.dart'; @@ -12,8 +11,11 @@ import 'package:mlperfbench/benchmark/run_mode.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; import 'package:mlperfbench/state/task_runner.dart'; +import 'package:mlperfbench/store.dart'; import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/formatter.dart'; +import 'package:mlperfbench/ui/home/dotted_progress_circle.dart'; +import 'package:mlperfbench/ui/home/infinite_progress_circle.dart'; import 'package:mlperfbench/ui/icons.dart'; class BenchmarkRunningScreen extends StatefulWidget { @@ -30,11 +32,13 @@ class _BenchmarkRunningScreenState extends State { late BenchmarkState state; late AppLocalizations l10n; late ProgressInfo progress; + late Store store; @override Widget build(BuildContext context) { state = context.watch(); l10n = AppLocalizations.of(context); + store = context.watch(); progress = state.taskRunner.progressInfo; final backgroundGradient = BoxDecoration( @@ -90,6 +94,20 @@ class _BenchmarkRunningScreenState extends State { var containerWidth = 0.50 * MediaQuery.of(context).size.width; containerWidth = max(containerWidth, 160); containerWidth = min(containerWidth, 240); + Widget animation; + if (store.progressAnimationMode == 1) { + animation = DottedProgressCircle( + circleSize: containerWidth + 40, + dotSize: 10, + ); + } else if (store.progressAnimationMode == 2) { + animation = GradientProgressCircle( + size: containerWidth + 20, + strokeWidth: 6.0, + ); + } else { + animation = const SizedBox(height: 0); + } return Stack( alignment: AlignmentDirectional.center, children: [ @@ -114,10 +132,7 @@ class _BenchmarkRunningScreenState extends State { ), ), ), - DottedProgressCircle( - circleSize: containerWidth + 20, - dotSize: 10, - ), + animation, ], ); } @@ -201,10 +216,19 @@ class _BenchmarkRunningScreenState extends State { const trailingWidth = 24.0; Widget? doneIcon; if (progress.currentBenchmark?.taskName == benchmarkInfo.taskName) { - doneIcon = const DottedProgressCircle( - circleSize: trailingWidth + 20, - dotSize: 2, - ); + if (store.progressAnimationMode == 1) { + doneIcon = const DottedProgressCircle( + circleSize: trailingWidth, + dotSize: 2.0, + ); + } else if (store.progressAnimationMode == 2) { + doneIcon = const GradientProgressCircle( + size: trailingWidth, + strokeWidth: 2.0, + ); + } else { + doneIcon = const SizedBox(height: 0); + } } else if (progress.completedBenchmarks.contains(benchmarkInfo)) { doneIcon = const Icon( Icons.check_circle, diff --git a/flutter/lib/ui/home/progress_circles.dart b/flutter/lib/ui/home/infinite_progress_circle.dart similarity index 85% rename from flutter/lib/ui/home/progress_circles.dart rename to flutter/lib/ui/home/infinite_progress_circle.dart index b22a86d7b..fbcdc73db 100644 --- a/flutter/lib/ui/home/progress_circles.dart +++ b/flutter/lib/ui/home/infinite_progress_circle.dart @@ -2,19 +2,19 @@ import 'package:flutter/material.dart'; import 'package:mlperfbench/ui/home/gradient_circular_progress_indicator.dart'; -class InfiniteProgressCircle extends StatefulWidget { +class GradientProgressCircle extends StatefulWidget { final double size; final double strokeWidth; - const InfiniteProgressCircle( + const GradientProgressCircle( {Key? key, required this.size, required this.strokeWidth}) : super(key: key); @override - State createState() => _InfiniteProgressCircleState(); + State createState() => _GradientProgressCircleState(); } -class _InfiniteProgressCircleState extends State +class _GradientProgressCircleState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; diff --git a/flutter/lib/ui/settings/settings_screen.dart b/flutter/lib/ui/settings/settings_screen.dart index 48559e60f..633c5b31b 100644 --- a/flutter/lib/ui/settings/settings_screen.dart +++ b/flutter/lib/ui/settings/settings_screen.dart @@ -34,6 +34,7 @@ class _SettingsScreen extends State { state = context.watch(); l10n = AppLocalizations.of(context); + Widget progressAnimationDropdown = _progressAnimationDropdown(); Widget artificialLoadSwitch = _artificialLoadSwitch(); Widget crashlyticsSwitch = _crashlyticsSwitch(); Widget runModeDropdown = _runModeDropdown(); @@ -51,6 +52,7 @@ class _SettingsScreen extends State { child: ListView( padding: const EdgeInsets.only(top: 20), children: [ + progressAnimationDropdown, runModeDropdown, offlineModeSwitch, keepLogSwitch, @@ -180,6 +182,27 @@ class _SettingsScreen extends State { ); } + Widget _progressAnimationDropdown() { + return ListTile( + title: const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Text('Progress Animation'), + ), + subtitle: const Text('Progress animation during a benchmark run'), + trailing: DropdownButton( + borderRadius: BorderRadius.circular(WidgetSizes.borderRadius), + value: store.progressAnimationMode, + items: const [ + DropdownMenuItem(value: 0, child: Text('No animation')), + DropdownMenuItem(value: 1, child: Text('Dotted Circle')), + DropdownMenuItem(value: 2, child: Text('Gradient Circle')), + ], + onChanged: (value) => setState(() { + store.progressAnimationMode = value!; + })), + ); + } + Widget _runModeDropdown() { return ListTile( title: Padding(