diff --git a/flutter/assets/icons/ic_image_classification.svg b/flutter/assets/icons/ic_image_classification.svg deleted file mode 100644 index b02ac5bdd..000000000 --- a/flutter/assets/icons/ic_image_classification.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/flutter/assets/icons/ic_image_classification_offline.svg b/flutter/assets/icons/ic_image_classification_offline.svg deleted file mode 100644 index e3bba115c..000000000 --- a/flutter/assets/icons/ic_image_classification_offline.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - diff --git a/flutter/assets/icons/ic_image_classification_offline_white.svg b/flutter/assets/icons/ic_image_classification_offline_white.svg deleted file mode 100644 index 2455d1f8e..000000000 --- a/flutter/assets/icons/ic_image_classification_offline_white.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - diff --git a/flutter/assets/icons/ic_image_segmentation.svg b/flutter/assets/icons/ic_image_segmentation.svg deleted file mode 100644 index 4c5f897c9..000000000 --- a/flutter/assets/icons/ic_image_segmentation.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - diff --git a/flutter/assets/icons/ic_language_processing.svg b/flutter/assets/icons/ic_language_processing.svg deleted file mode 100644 index ddacf9ceb..000000000 --- a/flutter/assets/icons/ic_language_processing.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/flutter/assets/icons/ic_object_detection.svg b/flutter/assets/icons/ic_object_detection.svg deleted file mode 100644 index c22c94092..000000000 --- a/flutter/assets/icons/ic_object_detection.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/flutter/assets/icons/ic_offline_image_classification.svg b/flutter/assets/icons/ic_offline_image_classification.svg deleted file mode 100644 index 20441ae49..000000000 --- a/flutter/assets/icons/ic_offline_image_classification.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/flutter/assets/icons/ic_super_resolution.svg b/flutter/assets/icons/ic_super_resolution.svg deleted file mode 100644 index 56caf7a9c..000000000 --- a/flutter/assets/icons/ic_super_resolution.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/flutter/assets/icons/ic_task_image_classification.svg b/flutter/assets/icons/ic_task_image_classification.svg new file mode 100644 index 000000000..58ea39bc9 --- /dev/null +++ b/flutter/assets/icons/ic_task_image_classification.svg @@ -0,0 +1,3 @@ + + + diff --git a/flutter/assets/icons/ic_task_image_classification_offline.svg b/flutter/assets/icons/ic_task_image_classification_offline.svg new file mode 100644 index 000000000..1f0ad1237 --- /dev/null +++ b/flutter/assets/icons/ic_task_image_classification_offline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/flutter/assets/icons/ic_task_image_classification_offline_white.svg b/flutter/assets/icons/ic_task_image_classification_offline_white.svg new file mode 100644 index 000000000..ca6ec2e9c --- /dev/null +++ b/flutter/assets/icons/ic_task_image_classification_offline_white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/flutter/assets/icons/ic_task_image_classification_white.svg b/flutter/assets/icons/ic_task_image_classification_white.svg new file mode 100644 index 000000000..2a802d887 --- /dev/null +++ b/flutter/assets/icons/ic_task_image_classification_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/flutter/assets/icons/ic_task_image_segmentation.svg b/flutter/assets/icons/ic_task_image_segmentation.svg new file mode 100644 index 000000000..cbfa18d83 --- /dev/null +++ b/flutter/assets/icons/ic_task_image_segmentation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/flutter/assets/icons/ic_task_image_segmentation_white.svg b/flutter/assets/icons/ic_task_image_segmentation_white.svg new file mode 100644 index 000000000..11439b411 --- /dev/null +++ b/flutter/assets/icons/ic_task_image_segmentation_white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/flutter/assets/icons/ic_task_language_processing.svg b/flutter/assets/icons/ic_task_language_processing.svg new file mode 100644 index 000000000..c8d194ba5 --- /dev/null +++ b/flutter/assets/icons/ic_task_language_processing.svg @@ -0,0 +1,4 @@ + + + + diff --git a/flutter/assets/icons/ic_task_language_processing_white.svg b/flutter/assets/icons/ic_task_language_processing_white.svg new file mode 100644 index 000000000..a80b6c864 --- /dev/null +++ b/flutter/assets/icons/ic_task_language_processing_white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/flutter/assets/icons/ic_task_object_detection.svg b/flutter/assets/icons/ic_task_object_detection.svg new file mode 100644 index 000000000..07ebdf97b --- /dev/null +++ b/flutter/assets/icons/ic_task_object_detection.svg @@ -0,0 +1,4 @@ + + + + diff --git a/flutter/assets/icons/ic_task_object_detection_white.svg b/flutter/assets/icons/ic_task_object_detection_white.svg new file mode 100644 index 000000000..b79287cf0 --- /dev/null +++ b/flutter/assets/icons/ic_task_object_detection_white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/flutter/assets/icons/ic_task_super_resolution.svg b/flutter/assets/icons/ic_task_super_resolution.svg new file mode 100644 index 000000000..62a11dc6e --- /dev/null +++ b/flutter/assets/icons/ic_task_super_resolution.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/flutter/assets/icons/ic_task_super_resolution_white.svg b/flutter/assets/icons/ic_task_super_resolution_white.svg new file mode 100644 index 000000000..83732a455 --- /dev/null +++ b/flutter/assets/icons/ic_task_super_resolution_white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/flutter/lib/app_constants.dart b/flutter/lib/app_constants.dart index 552460d0e..176dc7f79 100644 --- a/flutter/lib/app_constants.dart +++ b/flutter/lib/app_constants.dart @@ -1,6 +1,6 @@ -import 'package:flutter/material.dart'; - class DartDefine { + DartDefine._(); + static const isOfficialBuild = bool.fromEnvironment('OFFICIAL_BUILD', defaultValue: false); static const firebaseCrashlyticsEnabled = @@ -19,76 +19,6 @@ class WidgetKeys { static const String totalScoreCircle = 'totalScoreCircle'; } -class AppColors { - static const lightText = Colors.white; - static const lightRedText = Color.fromARGB(255, 255, 120, 100); - static const darkText = Colors.black; - static const resultValid = Colors.indigo; - static const resultInvalid = Colors.red; - static const darkRedText = Colors.red; - static const lightBlue = Color(0XFF2C92CB); - static const mediumBlue = Color(0xFF135384); - static const darkBlue = Color(0xFF0B3A61); - - static const dialogBackground = Colors.white; - static const snackBarBackground = Color(0xFFEDEDED); - static const appBarBackground = - DartDefine.isOfficialBuild ? Color(0xFF166299) : Colors.brown; - - static const appBarIcon = Colors.white; - - static List get mainScreenGradient => DartDefine.isOfficialBuild - ? [ - const Color(0xFF31A3E2), - const Color(0xFF31A3E2), - const Color(0xFF31A3E2), - const Color(0xFF3189E2), - const Color(0xFF0B4A7F), - ] - : [ - Colors.brown, - Colors.brown.shade500, - Colors.brown.shade500, - Colors.brown.shade700, - Colors.brown.shade800, - ]; - - static const runBenchmarkRectangle = Color(0xFF0DB526); - - static List get progressScreenGradient => DartDefine.isOfficialBuild - ? [const Color(0xff3189E2), const Color(0xff0B4A7F)] - : [Colors.brown.shade400, Colors.brown]; - - static const progressCircle = Color(0xff135384); - - static const progressCancelButton = Color(0x000B4A7F); - - static List get progressCircleGradient => - [const Color(0xff135384), const Color(0xff135384)]; - - static List get resultCircleGradient => [ - Color.lerp(const Color(0xFF328BE2), Colors.white, 1 - 0.65)!, - const Color(0xFF328BE2), // 328BE2 - ]; - - static List get resultBarGradient => [ - const Color(0xFF135384), - const Color(0xFF3183E2), - const Color(0xFF31B8E2), - const Color(0xFF7DD5F0), - const Color(0xFF6AD7F9) - ]; - - static const shareRectangle = Colors.green; - - static Color get shareTextButton => Colors.blue.shade900; -} - -class WidgetSizes { - static const circleWidthFactor = 0.32; - static const borderRadius = 8.0; -} - class BenchmarkId { static const imageClassification = 'image_classification'; static const objectDetection = 'object_detection'; diff --git a/flutter/lib/data/environment/environment_info.dart b/flutter/lib/data/environment/environment_info.dart index 87e26d81d..57a36da8e 100644 --- a/flutter/lib/data/environment/environment_info.dart +++ b/flutter/lib/data/environment/environment_info.dart @@ -3,6 +3,7 @@ import 'package:json_annotation/json_annotation.dart'; import 'package:mlperfbench/data/environment/env_android.dart'; import 'package:mlperfbench/data/environment/env_ios.dart'; import 'package:mlperfbench/data/environment/env_windows.dart'; +import 'package:mlperfbench/ui/formatter.dart'; part 'environment_info.g.dart'; @@ -54,7 +55,7 @@ class EnvironmentInfo { if (android == null) { return 'Unknown Android device'; } - return '${android.manufacturer} ${android.modelName}'; + return '${android.manufacturer} ${android.modelName}'.toUIString(); case EnvPlatform.ios: final ios = value.ios; if (ios == null) { diff --git a/flutter/lib/ui/app_styles.dart b/flutter/lib/ui/app_styles.dart new file mode 100644 index 000000000..6c14b8f13 --- /dev/null +++ b/flutter/lib/ui/app_styles.dart @@ -0,0 +1,68 @@ +import 'package:flutter/material.dart'; + +import 'package:mlperfbench/app_constants.dart'; + +class AppColors { + AppColors._(); + + static const _blue1 = Color(0XFF2C92CB); + static const _blue2 = Color(0XFF2980B7); + static const _blue3 = Color(0XFF166299); + static const _blue4 = Color(0XFF135384); + static const _blue5 = Color(0xFF0B3A61); + static const _green = Color(0xFF41C555); + static const _brown = Colors.brown; + + static const lightText = Colors.white; + static const darkText = Colors.black; + static const resultValidText = Colors.indigo; + static const resultInvalidText = Colors.red; + static const errorText = Colors.red; + + static const primary = _blue2; + static const secondary = _blue1; + + static const primaryAppBarBackground = + DartDefine.isOfficialBuild ? _blue3 : _brown; + static const secondaryAppBarBackground = + DartDefine.isOfficialBuild ? _blue1 : _brown; + static const appBarIcon = Colors.white; + static const drawerBackground = _blue4; + static const drawerForeground = Colors.white; + static const dialogBackground = Colors.white; + static const shareTextButton = _blue2; + static const shareSectionBackground = _blue4; + static const infoSectionBackground = _blue5; + static const progressCircle = _blue4; + static const goCircle = _green; +} + +class AppGradients { + AppGradients._(); + + static List fullScreen = [ + AppColors._blue1, + AppColors._blue2, + AppColors._blue3, + AppColors._blue4, + ]; + + static List halfScreen = [ + AppColors._blue1, + AppColors._blue2, + AppColors._blue3, + ]; + + static List get scoreBar => [ + AppColors._blue3, + AppColors._blue2, + AppColors._blue1, + ]; +} + +class WidgetSizes { + WidgetSizes._(); + + static const circleWidthFactor = 0.32; + static const borderRadius = 8.0; +} diff --git a/flutter/lib/ui/confirm_dialog.dart b/flutter/lib/ui/confirm_dialog.dart index 52dc5a879..7946b9c84 100644 --- a/flutter/lib/ui/confirm_dialog.dart +++ b/flutter/lib/ui/confirm_dialog.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; enum ConfirmDialogAction { ok, cancel } diff --git a/flutter/lib/ui/error_dialog.dart b/flutter/lib/ui/error_dialog.dart index 1691e5745..c5deb5d3e 100644 --- a/flutter/lib/ui/error_dialog.dart +++ b/flutter/lib/ui/error_dialog.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; enum DialogTypeEnum { error, warning, success } diff --git a/flutter/lib/ui/formatter.dart b/flutter/lib/ui/formatter.dart index b18e7e6bb..cc393c698 100644 --- a/flutter/lib/ui/formatter.dart +++ b/flutter/lib/ui/formatter.dart @@ -25,3 +25,9 @@ extension DateTimeFormat on DateTime { return dateFormat.format(this); } } + +extension StringFormat on String { + String toUIString() { + return toBeginningOfSentenceCase(this) ?? this; + } +} diff --git a/flutter/lib/ui/history/history_list_item.dart b/flutter/lib/ui/history/history_list_item.dart index 433d1f6ce..2a3ac8fe4 100644 --- a/flutter/lib/ui/history/history_list_item.dart +++ b/flutter/lib/ui/history/history_list_item.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/data/results/benchmark_result.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/formatter.dart'; import 'package:mlperfbench/ui/history/list_item.dart'; import 'package:mlperfbench/ui/icons.dart'; @@ -53,7 +53,7 @@ class HistoryListItem implements ListItem { style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16.0, - color: AppColors.resultValid, + color: AppColors.resultValidText, ), ), ), diff --git a/flutter/lib/ui/history/utils.dart b/flutter/lib/ui/history/utils.dart index 132d89dc7..680b37e20 100644 --- a/flutter/lib/ui/history/utils.dart +++ b/flutter/lib/ui/history/utils.dart @@ -3,11 +3,11 @@ import 'package:flutter/services.dart'; import 'package:bot_toast/bot_toast.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/data/environment/env_android.dart'; import 'package:mlperfbench/data/environment/environment_info.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; class HistoryHelperUtils { final AppLocalizations l10n; @@ -92,7 +92,7 @@ class HistoryHelperUtils { final style = rowData.isHeader ? headerStyle : rowStyle; final perfStyle = rowData.throughputValid ? style - : const TextStyle(color: AppColors.darkRedText); + : const TextStyle(color: AppColors.resultInvalidText); final firstColumnText = Text(rowData.name, style: style); final firstColumn = rowData.isHeader ? firstColumnText diff --git a/flutter/lib/ui/home/app_drawer.dart b/flutter/lib/ui/home/app_drawer.dart index 55c71209c..9fceb08a1 100644 --- a/flutter/lib/ui/home/app_drawer.dart +++ b/flutter/lib/ui/home/app_drawer.dart @@ -5,6 +5,7 @@ import 'package:url_launcher/url_launcher.dart'; import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/firebase/firebase_manager.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/history/history_list_screen.dart'; import 'package:mlperfbench/ui/home/user_profile.dart'; import 'package:mlperfbench/ui/settings/about_screen.dart'; @@ -18,8 +19,26 @@ class AppDrawer extends StatelessWidget { final header = buildHeader(context); final menuList = buildMenuList(context); return Drawer( - child: Column( - children: [header] + menuList, + child: Theme( + data: Theme.of(context).copyWith( + textTheme: Theme.of(context).textTheme.apply( + bodyColor: AppColors.drawerForeground, + displayColor: AppColors.drawerForeground, + decorationColor: AppColors.drawerForeground, + ), + listTileTheme: const ListTileThemeData( + iconColor: AppColors.drawerForeground, + ), + iconTheme: const IconThemeData( + color: AppColors.drawerForeground, + ), + ), + child: Container( + color: AppColors.drawerBackground, + child: Column( + children: [header] + menuList, + ), + ), ), ); } diff --git a/flutter/lib/ui/home/benchmark_config_section.dart b/flutter/lib/ui/home/benchmark_config_section.dart index 1d82fa7e7..2f18c4cfb 100644 --- a/flutter/lib/ui/home/benchmark_config_section.dart +++ b/flutter/lib/ui/home/benchmark_config_section.dart @@ -3,10 +3,10 @@ import 'package:flutter/material.dart'; import 'package:collection/collection.dart'; import 'package:provider/provider.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/benchmark/benchmark.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/home/benchmark_info_button.dart'; class BenchmarkConfigSection extends StatefulWidget { @@ -54,7 +54,10 @@ class _BenchmarkConfigSectionState extends State { leading: SizedBox( width: leadingWidth, height: leadingWidth, - child: benchmark.info.icon), + child: Padding( + padding: const EdgeInsets.all(4), + child: benchmark.info.icon, + )), title: _name(benchmark), subtitle: SizedBox( width: subtitleWidth, diff --git a/flutter/lib/ui/home/benchmark_result_screen.dart b/flutter/lib/ui/home/benchmark_result_screen.dart index e58037fc2..54beb72b9 100644 --- a/flutter/lib/ui/home/benchmark_result_screen.dart +++ b/flutter/lib/ui/home/benchmark_result_screen.dart @@ -7,13 +7,13 @@ import 'package:mlperfbench/benchmark/benchmark.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/device_info.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/confirm_dialog.dart'; import 'package:mlperfbench/ui/formatter.dart'; import 'package:mlperfbench/ui/home/app_drawer.dart'; import 'package:mlperfbench/ui/home/benchmark_info_button.dart'; import 'package:mlperfbench/ui/home/result_circle.dart'; import 'package:mlperfbench/ui/home/share_button.dart'; -import 'package:mlperfbench/ui/home/shared_styles.dart'; enum _ScreenMode { performance, accuracy } @@ -74,9 +74,9 @@ class _BenchmarkResultScreenState extends State title: Text(title), bottom: PreferredSize( preferredSize: const Size.fromHeight(56.0), - child: _sharingSection(), + child: _shareSection(), ), - backgroundColor: AppColors.lightBlue, + backgroundColor: AppColors.secondaryAppBarBackground, ), drawer: const AppDrawer(), body: LayoutBuilder( @@ -97,7 +97,7 @@ class _BenchmarkResultScreenState extends State ); } - Widget _sharingSection() { + Widget _shareSection() { final lastResult = state.lastResult; Text deviceInfoText; Text benchmarkDateText; @@ -142,8 +142,8 @@ class _BenchmarkResultScreenState extends State }, ); return Container( - padding: const EdgeInsets.fromLTRB(20, 8, 10, 8), - color: AppColors.mediumBlue, + padding: const EdgeInsets.fromLTRB(20, 4, 10, 4), + color: AppColors.shareSectionBackground, child: DefaultTextStyle.merge( style: const TextStyle(color: Colors.white), child: Row( @@ -162,7 +162,13 @@ class _BenchmarkResultScreenState extends State Widget _totalScoreSection() { return Container( - decoration: mainLinearGradientDecoration, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: AppGradients.halfScreen, + ), + ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, @@ -243,7 +249,9 @@ class _BenchmarkResultScreenState extends State var subtitleColumnChildren = []; subtitleColumnChildren.add(const SizedBox(height: 4)); final resultTextStyle = TextStyle( - color: resultIsValid ? AppColors.resultValid : AppColors.resultInvalid, + color: resultIsValid + ? AppColors.resultValidText + : AppColors.resultInvalidText, fontSize: 18.0, fontWeight: FontWeight.bold, ); @@ -302,7 +310,10 @@ class _BenchmarkResultScreenState extends State leading: SizedBox( width: leadingWidth, height: leadingWidth, - child: benchmark.info.icon), + child: Padding( + padding: const EdgeInsets.all(8), + child: benchmark.info.icon, + )), title: SizedBox( width: subtitleWidth, child: Text(benchmark.taskConfig.name), @@ -357,15 +368,14 @@ class BlueProgressLine extends Container { widthFactor: _progressValue, child: Container( alignment: Alignment.topLeft, - margin: const EdgeInsets.only(bottom: 10.0), - height: 10, + margin: const EdgeInsets.only(bottom: 8.0), + height: 8.0, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(5.0), + borderRadius: BorderRadius.circular(4.0), gradient: LinearGradient( - colors: AppColors.resultBarGradient, + colors: AppGradients.scoreBar, begin: Alignment.topLeft, - end: Alignment(1 / _progressValue, 0), - stops: const [0, 0.36, 0.61, 0.83, 1.0], + end: Alignment.bottomRight, ), ), ), diff --git a/flutter/lib/ui/home/benchmark_running_screen.dart b/flutter/lib/ui/home/benchmark_running_screen.dart index 8b2e9163c..0829f9694 100644 --- a/flutter/lib/ui/home/benchmark_running_screen.dart +++ b/flutter/lib/ui/home/benchmark_running_screen.dart @@ -6,12 +6,12 @@ import 'package:flutter/material.dart'; import 'package:collection/collection.dart'; import 'package:provider/provider.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/benchmark/info.dart'; 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/ui/app_styles.dart'; import 'package:mlperfbench/ui/formatter.dart'; import 'package:mlperfbench/ui/home/progress_circles.dart'; import 'package:mlperfbench/ui/icons.dart'; @@ -39,7 +39,7 @@ class _BenchmarkRunningScreenState extends State { final backgroundGradient = BoxDecoration( gradient: LinearGradient( - colors: AppColors.progressScreenGradient, + colors: AppGradients.fullScreen, begin: Alignment.topCenter, end: Alignment.bottomCenter, ), @@ -96,14 +96,10 @@ class _BenchmarkRunningScreenState extends State { Container( width: containerWidth, height: containerWidth, - decoration: BoxDecoration( + decoration: const BoxDecoration( shape: BoxShape.circle, - gradient: LinearGradient( - colors: AppColors.progressCircleGradient, - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - ), - boxShadow: const [ + color: AppColors.progressCircle, + boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(15, 15), @@ -218,7 +214,7 @@ class _BenchmarkRunningScreenState extends State { } return ListTile( contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 32), - tileColor: isEven ? AppColors.mediumBlue : Colors.transparent, + tileColor: isEven ? AppColors.progressCircle : Colors.transparent, textColor: AppColors.lightText, dense: true, minVerticalPadding: 0, @@ -284,8 +280,6 @@ class _BenchmarkRunningScreenState extends State { padding: const EdgeInsets.fromLTRB(20, 10, 20, 20), child: TextButton( style: ButtonStyle( - backgroundColor: - MaterialStateProperty.all(AppColors.progressCancelButton), shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), diff --git a/flutter/lib/ui/home/benchmark_start_screen.dart b/flutter/lib/ui/home/benchmark_start_screen.dart index ba58eedd6..af0955fae 100644 --- a/flutter/lib/ui/home/benchmark_start_screen.dart +++ b/flutter/lib/ui/home/benchmark_start_screen.dart @@ -7,11 +7,11 @@ import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/device_info.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; import 'package:mlperfbench/store.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/confirm_dialog.dart'; import 'package:mlperfbench/ui/error_dialog.dart'; import 'package:mlperfbench/ui/home/app_drawer.dart'; import 'package:mlperfbench/ui/home/benchmark_config_section.dart'; -import 'package:mlperfbench/ui/home/shared_styles.dart'; class BenchmarkStartScreen extends StatefulWidget { const BenchmarkStartScreen({Key? key}) : super(key: key); @@ -34,7 +34,7 @@ class _BenchmarkStartScreenState extends State { return Scaffold( appBar: AppBar( title: Text(l10n.menuHome), - backgroundColor: AppColors.lightBlue, + backgroundColor: AppColors.secondaryAppBarBackground, ), drawer: const AppDrawer(), body: SafeArea( @@ -43,11 +43,11 @@ class _BenchmarkStartScreenState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( - flex: 32, + flex: 34, child: _goButtonSection(context), ), Expanded( - flex: 8, + flex: 6, child: _infoSection(), ), Expanded( @@ -75,9 +75,9 @@ class _BenchmarkStartScreenState extends State { .replaceAll('', totalCount); var deviceDescription = DeviceInfo.instance.envInfo.modelDescription; return Container( - padding: const EdgeInsets.fromLTRB(20, 8, 10, 8), + padding: const EdgeInsets.fromLTRB(20, 4, 10, 4), width: double.infinity, - color: AppColors.mediumBlue, + color: AppColors.infoSectionBackground, child: DefaultTextStyle.merge( style: const TextStyle(color: Colors.white, fontSize: 14), child: Column( @@ -85,7 +85,6 @@ class _BenchmarkStartScreenState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded(flex: 1, child: Text(deviceDescription)), - const SizedBox(height: 4), Expanded(flex: 1, child: Text(selectedBenchmarkText)) ], ), @@ -103,14 +102,20 @@ class _BenchmarkStartScreenState extends State { Container( width: MediaQuery.of(context).size.width, alignment: Alignment.center, - decoration: mainLinearGradientDecoration, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: AppGradients.halfScreen, + ), + ), ), Container( alignment: Alignment.center, child: ElevatedButton( key: const Key(WidgetKeys.goButton), style: ElevatedButton.styleFrom( - backgroundColor: Colors.green, + backgroundColor: AppColors.goCircle, shape: const CircleBorder(), minimumSize: Size.fromWidth(circleWidth)), child: Text( diff --git a/flutter/lib/ui/home/resource_loading_screen.dart b/flutter/lib/ui/home/resource_loading_screen.dart index 1f54c2c29..b114cdede 100644 --- a/flutter/lib/ui/home/resource_loading_screen.dart +++ b/flutter/lib/ui/home/resource_loading_screen.dart @@ -2,9 +2,9 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; class ResourceLoadingScreen extends StatefulWidget { const ResourceLoadingScreen({super.key}); @@ -22,58 +22,32 @@ class _ResourceLoadingScreenState extends State { final l10n = AppLocalizations.of(context); final loadingProgressText = '${(state.loadingProgress * 100).round()}%'; - final progressCircle = Stack( - alignment: AlignmentDirectional.center, - children: [ - Center( - child: Container( - width: progressCircleEdgeSize, - height: progressCircleEdgeSize, - decoration: BoxDecoration( - shape: BoxShape.circle, - gradient: LinearGradient( - colors: AppColors.progressCircleGradient, - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - ), - boxShadow: const [ - BoxShadow( - color: Colors.black12, - offset: Offset(15, 15), - blurRadius: 10, - ) - ], - ), - child: Center( - child: Text( - loadingProgressText, - style: const TextStyle( - fontWeight: FontWeight.bold, - color: AppColors.lightText, - ), - textScaleFactor: 2, - ), - ), - ), + final progressCircle = Center( + child: Container( + width: progressCircleEdgeSize, + height: progressCircleEdgeSize, + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: AppColors.progressCircle, + boxShadow: [ + BoxShadow( + color: Colors.black12, + offset: Offset(15, 15), + blurRadius: 10, + ) + ], ), - Center( - child: Container( - width: MediaQuery.of(context).size.width * 0.35, - alignment: Alignment.center, - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: AppColors.progressCircle, - boxShadow: [ - BoxShadow( - color: Colors.black12, - offset: Offset(15, 15), - blurRadius: 10, - ) - ], + child: Center( + child: Text( + loadingProgressText, + style: const TextStyle( + fontWeight: FontWeight.bold, + color: AppColors.lightText, ), + textScaleFactor: 2, ), ), - ], + ), ); final statusText = Padding( @@ -104,7 +78,7 @@ class _ResourceLoadingScreenState extends State { final backgroundGradient = BoxDecoration( gradient: LinearGradient( - colors: AppColors.progressScreenGradient, + colors: AppGradients.fullScreen, begin: Alignment.topCenter, end: Alignment.bottomCenter, ), diff --git a/flutter/lib/ui/home/result_circle.dart b/flutter/lib/ui/home/result_circle.dart index e0d2fa918..67dc21ee1 100644 --- a/flutter/lib/ui/home/result_circle.dart +++ b/flutter/lib/ui/home/result_circle.dart @@ -2,7 +2,7 @@ import 'dart:math'; import 'package:flutter/material.dart'; -import 'package:mlperfbench/app_constants.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/icons.dart' as app_icons; class ResultCircle extends StatefulWidget { @@ -63,14 +63,10 @@ class _ResultCircleState extends State margin: const EdgeInsets.only(bottom: 20.0), width: edgeSize, height: edgeSize, - decoration: BoxDecoration( + decoration: const BoxDecoration( shape: BoxShape.circle, - gradient: LinearGradient( - colors: AppColors.resultCircleGradient, - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - ), - boxShadow: const [ + color: AppColors.progressCircle, + boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(15, 15), diff --git a/flutter/lib/ui/home/share_button.dart b/flutter/lib/ui/home/share_button.dart index f85259dd5..4b5495bc6 100644 --- a/flutter/lib/ui/home/share_button.dart +++ b/flutter/lib/ui/home/share_button.dart @@ -3,10 +3,10 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:share_plus/share_plus.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/firebase/firebase_manager.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/home/user_profile.dart'; enum _ShareDestination { local, cloud } @@ -95,7 +95,7 @@ class _ShareButton extends State { const SizedBox(width: 20), Text( l10n.shareButtonOther, - style: TextStyle( + style: const TextStyle( color: AppColors.shareTextButton, fontSize: 18, ), @@ -120,7 +120,7 @@ class _ShareButton extends State { const SizedBox(width: 20), Text( l10n.shareButtonMLCommons, - style: TextStyle( + style: const TextStyle( color: AppColors.shareTextButton, fontSize: 18, ), @@ -155,8 +155,8 @@ class _ShareButton extends State { children: [ Text( l10n.shareButtonMLCommons, - style: - TextStyle(color: AppColors.shareTextButton, fontSize: 18), + style: const TextStyle( + color: AppColors.shareTextButton, fontSize: 18), ), const SizedBox(height: 20), Text(l10n.uploadRequiredSignedIn), diff --git a/flutter/lib/ui/home/shared_styles.dart b/flutter/lib/ui/home/shared_styles.dart deleted file mode 100644 index dc1568dab..000000000 --- a/flutter/lib/ui/home/shared_styles.dart +++ /dev/null @@ -1,14 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'package:mlperfbench/app_constants.dart'; - -const mainLinearGradientDecoration = BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - AppColors.lightBlue, - AppColors.darkBlue, - ], - ), -); diff --git a/flutter/lib/ui/icons.dart b/flutter/lib/ui/icons.dart index 078c16d26..edc1dcc80 100644 --- a/flutter/lib/ui/icons.dart +++ b/flutter/lib/ui/icons.dart @@ -5,11 +5,6 @@ import 'package:flutter_svg/svg.dart'; import 'package:mlperfbench/app_constants.dart'; class AppIcons { - static SvgPicture _pSvgWhite(String name) { - const colorFilter = ColorFilter.mode(Colors.white, BlendMode.srcIn); - return SvgPicture.asset('assets/icons/$name', colorFilter: colorFilter); - } - static SvgPicture _pSvgBlack(String name) { const colorFilter = ColorFilter.mode(Colors.black, BlendMode.srcIn); return SvgPicture.asset('assets/icons/$name', colorFilter: colorFilter); @@ -20,28 +15,30 @@ class AppIcons { } static final SvgPicture imageClassification = - _pSvg('ic_image_classification.svg'); + _pSvg('ic_task_image_classification.svg'); static final SvgPicture imageSegmentation = - _pSvg('ic_image_segmentation.svg'); - static final SvgPicture objectDetection = _pSvg('ic_object_detection.svg'); + _pSvg('ic_task_image_segmentation.svg'); + static final SvgPicture objectDetection = + _pSvg('ic_task_object_detection.svg'); static final SvgPicture languageProcessing = - _pSvg('ic_language_processing.svg'); + _pSvg('ic_task_language_processing.svg'); static final SvgPicture imageClassificationOffline = - _pSvg('ic_image_classification_offline.svg'); - static final SvgPicture superResolution = _pSvg('ic_super_resolution.svg'); + _pSvg('ic_task_image_classification_offline.svg'); + static final SvgPicture superResolution = + _pSvg('ic_task_super_resolution.svg'); static final SvgPicture imageClassificationWhite = - _pSvgWhite('ic_image_classification.svg'); + _pSvg('ic_task_image_classification_white.svg'); static final SvgPicture imageSegmentationWhite = - _pSvgWhite('ic_image_segmentation.svg'); + _pSvg('ic_task_image_segmentation_white.svg'); static final SvgPicture objectDetectionWhite = - _pSvgWhite('ic_object_detection.svg'); + _pSvg('ic_task_object_detection_white.svg'); static final SvgPicture languageProcessingWhite = - _pSvgWhite('ic_language_processing.svg'); + _pSvg('ic_task_language_processing_white.svg'); static final SvgPicture imageClassificationOfflineWhite = - _pSvg('ic_image_classification_offline_white.svg'); + _pSvg('ic_task_image_classification_offline_white.svg'); static final SvgPicture superResolutionWhite = - _pSvgWhite('ic_super_resolution.svg'); + _pSvg('ic_task_super_resolution_white.svg'); static final SvgPicture arrow = _pSvg('ic_arrow.svg'); diff --git a/flutter/lib/ui/root/app.dart b/flutter/lib/ui/root/app.dart index 091e77368..210a0e4f2 100644 --- a/flutter/lib/ui/root/app.dart +++ b/flutter/lib/ui/root/app.dart @@ -2,8 +2,8 @@ import 'package:flutter/material.dart'; import 'package:bot_toast/bot_toast.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; class MyApp extends StatelessWidget { final Widget home; @@ -18,11 +18,15 @@ class MyApp extends StatelessWidget { localizationsDelegates: const [AppLocalizations.delegate], supportedLocales: const [Locale('en', '')], theme: Theme.of(context).copyWith( + colorScheme: ColorScheme.fromSwatch().copyWith( + primary: AppColors.primary, + secondary: AppColors.secondary, + ), appBarTheme: const AppBarTheme( centerTitle: true, titleTextStyle: TextStyle(color: AppColors.lightText, fontSize: 20), elevation: 0, - backgroundColor: AppColors.appBarBackground, + backgroundColor: AppColors.primaryAppBarBackground, iconTheme: IconThemeData(color: AppColors.appBarIcon), ), popupMenuTheme: PopupMenuThemeData( diff --git a/flutter/lib/ui/root/exception_screen.dart b/flutter/lib/ui/root/exception_screen.dart index 8cf70e0b3..00df4c101 100644 --- a/flutter/lib/ui/root/exception_screen.dart +++ b/flutter/lib/ui/root/exception_screen.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -import 'package:mlperfbench/app_constants.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; class ExceptionWidget extends StatelessWidget { final Object error; diff --git a/flutter/lib/ui/root/resource_error_screen.dart b/flutter/lib/ui/root/resource_error_screen.dart index 809902e09..db10b33d3 100644 --- a/flutter/lib/ui/root/resource_error_screen.dart +++ b/flutter/lib/ui/root/resource_error_screen.dart @@ -2,10 +2,10 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import 'package:mlperfbench/app_constants.dart'; import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; import 'package:mlperfbench/store.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/error_dialog.dart'; import 'package:mlperfbench/ui/icons.dart' show AppIcons; import 'package:mlperfbench/ui/page_constraints.dart'; @@ -50,7 +50,7 @@ class ResourceErrorScreen extends StatelessWidget { textAlign: TextAlign.center, style: const TextStyle( fontSize: 15, - color: AppColors.darkRedText, + color: AppColors.errorText, ), ), Text( diff --git a/flutter/lib/ui/settings/settings_screen.dart b/flutter/lib/ui/settings/settings_screen.dart index 426f0fa67..48559e60f 100644 --- a/flutter/lib/ui/settings/settings_screen.dart +++ b/flutter/lib/ui/settings/settings_screen.dart @@ -12,6 +12,7 @@ import 'package:mlperfbench/firebase/firebase_manager.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; import 'package:mlperfbench/resources/config_manager.dart'; import 'package:mlperfbench/store.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/confirm_dialog.dart'; import 'package:mlperfbench/ui/settings/task_config_section.dart'; diff --git a/flutter/lib/ui/settings/snack_bar.dart b/flutter/lib/ui/settings/snack_bar.dart deleted file mode 100644 index 4846efecb..000000000 --- a/flutter/lib/ui/settings/snack_bar.dart +++ /dev/null @@ -1,13 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'package:mlperfbench/app_constants.dart'; - -SnackBar getSnackBar(String message) => SnackBar( - duration: const Duration(seconds: 2), - backgroundColor: AppColors.snackBarBackground, - content: Text( - message, - textAlign: TextAlign.center, - style: const TextStyle(color: AppColors.darkText), - ), - ); diff --git a/flutter/lib/ui/settings/task_config_section.dart b/flutter/lib/ui/settings/task_config_section.dart index 93c23ffd7..ebea3f0b6 100644 --- a/flutter/lib/ui/settings/task_config_section.dart +++ b/flutter/lib/ui/settings/task_config_section.dart @@ -11,6 +11,7 @@ import 'package:mlperfbench/benchmark/state.dart'; import 'package:mlperfbench/localizations/app_localizations.dart'; import 'package:mlperfbench/resources/config_manager.dart'; import 'package:mlperfbench/store.dart'; +import 'package:mlperfbench/ui/app_styles.dart'; import 'package:mlperfbench/ui/error_dialog.dart'; import 'package:mlperfbench/ui/settings/data_folder_type.dart'; @@ -121,7 +122,7 @@ class _DataFolderSelectorHelper { return Text( l10n.settingsTaskDataFolderWarning .replaceFirst('', store.customDataFolder), - style: const TextStyle(color: AppColors.darkRedText), + style: const TextStyle(color: AppColors.errorText), ); } return const SizedBox.shrink();