From 9a23e311fd082c7a0ff479421e6c4c7b3327d48d Mon Sep 17 00:00:00 2001 From: julian Date: Thu, 13 Apr 2023 13:04:08 -0600 Subject: [PATCH] WIP appearance settings code organisation --- .../appearance_settings_view.dart | 232 +----------------- .../sub_widgets/theme_option.dart | 70 ++++++ .../sub_widgets/theme_options_widget.dart | 50 ++++ ...ystem_brightness_theme_selection_view.dart | 130 ++++++++++ .../global_settings_view.dart | 2 +- lib/route_generator.dart | 3 +- 6 files changed, 256 insertions(+), 231 deletions(-) rename lib/pages/settings_views/global_settings_view/{ => appearance_settings}/appearance_settings_view.dart (64%) create mode 100644 lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart create mode 100644 lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_options_widget.dart create mode 100644 lib/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart b/lib/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart similarity index 64% rename from lib/pages/settings_views/global_settings_view/appearance_settings_view.dart rename to lib/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart index 981ddc69c..3cc7edae5 100644 --- a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart +++ b/lib/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart @@ -1,6 +1,8 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_options_widget.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart'; import 'package:stackwallet/providers/providers.dart'; import 'package:stackwallet/providers/ui/color_theme_provider.dart'; import 'package:stackwallet/utilities/assets.dart'; @@ -145,7 +147,7 @@ class AppearanceSettingsView extends ConsumerWidget { ), const Padding( padding: EdgeInsets.all(10), - child: ThemeOptionsView(), + child: ThemeOptionsWidget(), ), ], ), @@ -398,231 +400,3 @@ class _SystemBrightnessToggleState ); } } - -class ThemeOptionsView extends ConsumerWidget { - const ThemeOptionsView({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context, WidgetRef ref) { - return Column( - children: [ - for (int i = 0; i < (2 * ThemeType.values.length) - 1; i++) - (i % 2 == 1) - ? const SizedBox( - height: 10, - ) - : ThemeOption( - onPressed: () { - ref.read(prefsChangeNotifierProvider.notifier).theme = - ThemeType.values[i ~/ 2]; - ref.read(colorThemeProvider.notifier).state = - StackColors.fromStackColorTheme( - ThemeType.values[i ~/ 2].colorTheme, - ); - Assets.precache(context); - }, - onChanged: (newValue) { - if (newValue == ThemeType.values[i ~/ 2]) { - ref.read(prefsChangeNotifierProvider.notifier).theme = - ThemeType.values[i ~/ 2]; - ref.read(colorThemeProvider.notifier).state = - StackColors.fromStackColorTheme( - ThemeType.values[i ~/ 2].colorTheme, - ); - Assets.precache(context); - } - }, - value: ThemeType.values[i ~/ 2], - groupValue: - Theme.of(context).extension()!.themeType, - ), - ], - ); - } -} - -class ThemeOption extends StatelessWidget { - const ThemeOption( - {Key? key, - required this.onPressed, - required this.onChanged, - required this.value, - required this.groupValue}) - : super(key: key); - - final VoidCallback onPressed; - final void Function(Object?) onChanged; - final ThemeType value; - final ThemeType groupValue; - - @override - Widget build(BuildContext context) { - return MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: onPressed, - child: SizedBox( - width: 200, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - children: [ - SizedBox( - width: 10, - height: 10, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: value, - groupValue: groupValue, - onChanged: onChanged, - ), - ), - const SizedBox( - width: 14, - ), - Text( - value.prettyName, - style: STextStyles.desktopTextExtraSmall(context).copyWith( - color: - Theme.of(context).extension()!.textDark2, - ), - ), - ], - ), - ], - ), - ), - ); - } -} - -class SystemBrightnessThemeSelectionView extends StatelessWidget { - const SystemBrightnessThemeSelectionView({ - Key? key, - required this.brightness, - required this.current, - }) : super(key: key); - - final String brightness; - final ThemeType current; - - static const String routeName = "/chooseSystemTheme"; - - @override - Widget build(BuildContext context) { - return Background( - child: Scaffold( - backgroundColor: Theme.of(context).extension()!.background, - appBar: AppBar( - leading: AppBarBackButton( - onPressed: () async { - Navigator.of(context).pop(); - }, - ), - title: Text( - "Choose $brightness theme", - style: STextStyles.navBarTitle(context), - ), - ), - body: Padding( - padding: const EdgeInsets.all(16), - child: LayoutBuilder( - builder: (context, constraints) { - return SingleChildScrollView( - child: ConstrainedBox( - constraints: BoxConstraints( - minHeight: constraints.maxHeight, - ), - child: IntrinsicHeight( - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - RoundedWhiteContainer( - padding: const EdgeInsets.all(0), - child: RawMaterialButton( - // splashColor: Theme.of(context).extension()!.highlight, - padding: const EdgeInsets.all(0), - materialTapTargetSize: - MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: null, - child: Padding( - padding: const EdgeInsets.all(12), - child: Row( - children: [ - Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsets.all(10), - child: Column( - children: [ - for (int i = 0; - i < - (2 * - ThemeType.values - .length) - - 1; - i++) - (i % 2 == 1) - ? const SizedBox( - height: 10, - ) - : ThemeOption( - onPressed: () { - Navigator.of(context) - .pop(ThemeType - .values[ - i ~/ 2]); - }, - onChanged: (newValue) { - if (newValue == - ThemeType.values[ - i ~/ 2]) { - Navigator.of(context) - .pop(ThemeType - .values[ - i ~/ 2]); - } - }, - value: ThemeType - .values[i ~/ 2], - groupValue: current, - ), - ], - ), - ), - ], - ), - ], - ), - ), - ), - ), - ], - ), - ), - ), - ); - }, - ), - ), - ), - ); - } -} diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart b/lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart new file mode 100644 index 000000000..0d3a22b64 --- /dev/null +++ b/lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart @@ -0,0 +1,70 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/constants.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/color_theme.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +class ThemeOption extends StatelessWidget { + const ThemeOption( + {Key? key, + required this.onPressed, + required this.onChanged, + required this.value, + required this.groupValue}) + : super(key: key); + + final VoidCallback onPressed; + final void Function(Object?) onChanged; + final ThemeType value; + final ThemeType groupValue; + + @override + Widget build(BuildContext context) { + return MaterialButton( + splashColor: Colors.transparent, + hoverColor: Colors.transparent, + padding: const EdgeInsets.all(0), + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: onPressed, + child: SizedBox( + width: 200, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + children: [ + SizedBox( + width: 10, + height: 10, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: value, + groupValue: groupValue, + onChanged: onChanged, + ), + ), + const SizedBox( + width: 14, + ), + Text( + value.prettyName, + style: STextStyles.desktopTextExtraSmall(context).copyWith( + color: + Theme.of(context).extension()!.textDark2, + ), + ), + ], + ), + ], + ), + ), + ); + } +} diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_options_widget.dart b/lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_options_widget.dart new file mode 100644 index 000000000..4ad84c68f --- /dev/null +++ b/lib/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_options_widget.dart @@ -0,0 +1,50 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart'; +import 'package:stackwallet/providers/providers.dart'; +import 'package:stackwallet/providers/ui/color_theme_provider.dart'; +import 'package:stackwallet/utilities/assets.dart'; +import 'package:stackwallet/utilities/theme/color_theme.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +class ThemeOptionsWidget extends ConsumerWidget { + const ThemeOptionsWidget({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + return Column( + children: [ + for (int i = 0; i < (2 * ThemeType.values.length) - 1; i++) + (i % 2 == 1) + ? const SizedBox( + height: 10, + ) + : ThemeOption( + onPressed: () { + ref.read(prefsChangeNotifierProvider.notifier).theme = + ThemeType.values[i ~/ 2]; + ref.read(colorThemeProvider.notifier).state = + StackColors.fromStackColorTheme( + ThemeType.values[i ~/ 2].colorTheme, + ); + Assets.precache(context); + }, + onChanged: (newValue) { + if (newValue == ThemeType.values[i ~/ 2]) { + ref.read(prefsChangeNotifierProvider.notifier).theme = + ThemeType.values[i ~/ 2]; + ref.read(colorThemeProvider.notifier).state = + StackColors.fromStackColorTheme( + ThemeType.values[i ~/ 2].colorTheme, + ); + Assets.precache(context); + } + }, + value: ThemeType.values[i ~/ 2], + groupValue: + Theme.of(context).extension()!.themeType, + ), + ], + ); + } +} diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart b/lib/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart new file mode 100644 index 000000000..676d52139 --- /dev/null +++ b/lib/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart @@ -0,0 +1,130 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart'; +import 'package:stackwallet/utilities/constants.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/color_theme.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/widgets/background.dart'; +import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; +import 'package:stackwallet/widgets/rounded_white_container.dart'; + +class SystemBrightnessThemeSelectionView extends StatelessWidget { + const SystemBrightnessThemeSelectionView({ + Key? key, + required this.brightness, + required this.current, + }) : super(key: key); + + final String brightness; + final ThemeType current; + + static const String routeName = "/chooseSystemTheme"; + + @override + Widget build(BuildContext context) { + return Background( + child: Scaffold( + backgroundColor: Theme.of(context).extension()!.background, + appBar: AppBar( + leading: AppBarBackButton( + onPressed: () async { + Navigator.of(context).pop(); + }, + ), + title: Text( + "Choose $brightness theme", + style: STextStyles.navBarTitle(context), + ), + ), + body: Padding( + padding: const EdgeInsets.all(16), + child: LayoutBuilder( + builder: (context, constraints) { + return SingleChildScrollView( + child: ConstrainedBox( + constraints: BoxConstraints( + minHeight: constraints.maxHeight, + ), + child: IntrinsicHeight( + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: RawMaterialButton( + // splashColor: Theme.of(context).extension()!.highlight, + padding: const EdgeInsets.all(0), + materialTapTargetSize: + MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: null, + child: Padding( + padding: const EdgeInsets.all(12), + child: Row( + children: [ + Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.all(10), + child: Column( + children: [ + for (int i = 0; + i < + (2 * + ThemeType.values + .length) - + 1; + i++) + (i % 2 == 1) + ? const SizedBox( + height: 10, + ) + : ThemeOption( + onPressed: () { + Navigator.of(context) + .pop(ThemeType + .values[ + i ~/ 2]); + }, + onChanged: (newValue) { + if (newValue == + ThemeType.values[ + i ~/ 2]) { + Navigator.of(context) + .pop(ThemeType + .values[ + i ~/ 2]); + } + }, + value: ThemeType + .values[i ~/ 2], + groupValue: current, + ), + ], + ), + ), + ], + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ); + }, + ), + ), + ), + ); + } +} diff --git a/lib/pages/settings_views/global_settings_view/global_settings_view.dart b/lib/pages/settings_views/global_settings_view/global_settings_view.dart index 49e7ea36c..627961bed 100644 --- a/lib/pages/settings_views/global_settings_view/global_settings_view.dart +++ b/lib/pages/settings_views/global_settings_view/global_settings_view.dart @@ -5,7 +5,7 @@ import 'package:stackwallet/pages/address_book_views/address_book_view.dart'; import 'package:stackwallet/pages/pinpad_views/lock_screen_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/about_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart'; -import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings_view.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/currency_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/delete_account_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/language_view.dart'; diff --git a/lib/route_generator.dart b/lib/route_generator.dart index 41043f3bb..55fbe92a9 100644 --- a/lib/route_generator.dart +++ b/lib/route_generator.dart @@ -63,7 +63,8 @@ import 'package:stackwallet/pages/send_view/token_send_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/about_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/debug_view.dart'; -import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings_view.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart'; +import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/currency_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/delete_account_view.dart'; import 'package:stackwallet/pages/settings_views/global_settings_view/global_settings_view.dart';