From 9dc8d9321478f2753b845c8920cdc00d10b4acc6 Mon Sep 17 00:00:00 2001 From: julian Date: Fri, 17 Mar 2023 10:47:59 -0600 Subject: [PATCH] mobile appearance settings code cleanup --- .../appearance_settings_view.dart | 633 +++--------------- 1 file changed, 104 insertions(+), 529 deletions(-) diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart b/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart index 0ffdf8a10..04642b98f 100644 --- a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart +++ b/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart @@ -3,15 +3,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:stackwallet/hive/db.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/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; -import 'package:stackwallet/utilities/theme/dark_colors.dart'; -import 'package:stackwallet/utilities/theme/forest_colors.dart'; -import 'package:stackwallet/utilities/theme/fruit_sorbet_colors.dart'; -import 'package:stackwallet/utilities/theme/light_colors.dart'; -import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart'; -import 'package:stackwallet/utilities/theme/oled_black_colors.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'; @@ -23,25 +18,6 @@ class AppearanceSettingsView extends ConsumerWidget { static const String routeName = "/appearanceSettings"; - String chooseThemeType(ThemeType type) { - switch (type) { - case ThemeType.light: - return "Light theme"; - case ThemeType.chan: - return "Chan theme"; - case ThemeType.dark: - return "Dark theme"; - case ThemeType.oceanBreeze: - return "Ocean theme"; - case ThemeType.oledBlack: - return "Oled Black theme"; - case ThemeType.fruitSorbet: - return "Fruit Sorbet theme"; - case ThemeType.forest: - return "Forest theme"; - } - } - @override Widget build(BuildContext context, WidgetRef ref) { return Background( @@ -175,516 +151,115 @@ class AppearanceSettingsView extends ConsumerWidget { } } -class ThemeOptionsView extends ConsumerStatefulWidget { - const ThemeOptionsView({ - Key? key, - }) : super(key: key); +class ThemeOptionsView extends ConsumerWidget { + const ThemeOptionsView({Key? key}) : super(key: key); @override - ConsumerState createState() => _ThemeOptionsView(); -} - -class _ThemeOptionsView extends ConsumerState { - late String _selectedTheme; - - @override - void initState() { - _selectedTheme = - DB.instance.get(boxName: DB.boxNameTheme, key: "colorScheme") - as String? ?? - "light"; - - super.initState(); - } - - @override - Widget build(BuildContext context) { + Widget build(BuildContext context, WidgetRef ref) { return Column( children: [ - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.light.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - LightColors(), - ); - - setState(() { - _selectedTheme = "light"; - }); - }, - 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: "light", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "light") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.light.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - LightColors(), - ); - - setState(() { - _selectedTheme = "light"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Light", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], + for (int i = 0; i < (2 * ThemeType.values.length) - 1; i++) + (i % 2 == 1) + ? const SizedBox( + height: 10, + ) + : ThemeOption( + onPressed: () { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.values[i ~/ 2].name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + ThemeType.values[i ~/ 2].colorTheme, + ); + Assets.precache(context); + }, + onChanged: (newValue) { + if (newValue == ThemeType.values[i ~/ 2]) { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.values[i ~/ 2].name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + ThemeType.values[i ~/ 2].colorTheme, + ); + Assets.precache(context); + } + }, + value: ThemeType.values[i ~/ 2], + groupValue: + Theme.of(context).extension()!.themeType, ), - ], - ), - ), - ), - const SizedBox( - height: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.dark.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - DarkColors(), - ); - - setState(() { - _selectedTheme = "dark"; - }); - }, - 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: "dark", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "dark") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.dark.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - DarkColors(), - ); - - setState(() { - _selectedTheme = "dark"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Dark", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], - ), - ], - ), - ), - ), - const SizedBox( - height: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oceanBreeze.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OceanBreezeColors(), - ); - - setState(() { - _selectedTheme = "oceanBreeze"; - }); - }, - 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: "oceanBreeze", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "oceanBreeze") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oceanBreeze.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OceanBreezeColors(), - ); - - setState(() { - _selectedTheme = "oceanBreeze"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Ocean Breeze", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], - ), - ], - ), - ), - ), - const SizedBox( - height: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oledBlack.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OledBlackColors(), - ); - - setState(() { - _selectedTheme = "oledBlack"; - }); - }, - 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: "oledBlack", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "oledBlack") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oledBlack.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OledBlackColors(), - ); - - setState(() { - _selectedTheme = "oledBlack"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "OLED Black", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], - ), - ], - ), - ), - ), - const SizedBox( - height: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.fruitSorbet.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - FruitSorbetColors(), - ); - - setState(() { - _selectedTheme = "fruitSorbet"; - }); - }, - 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: "fruitSorbet", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "fruitSorbet") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.fruitSorbet.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - FruitSorbetColors(), - ); - - setState(() { - _selectedTheme = "fruitSorbet"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Fruit Sorbet", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], - ), - ], - ), - ), - ), - const SizedBox( - height: 10, - ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.forest.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - ForestColors(), - ); - - setState(() { - _selectedTheme = "forest"; - }); - }, - 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: "forest", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "forest") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.forest.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - ForestColors(), - ); - - setState(() { - _selectedTheme = "forest"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Forest", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], - ), - ], - ), - ), - ), ], ); } } + +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, + ), + ), + ], + ), + ], + ), + ), + ); + } +}