diff --git a/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart b/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart index b5f239ab1..bf6fc81e2 100644 --- a/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart +++ b/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart @@ -1,16 +1,19 @@ import 'package:flutter/material.dart'; -import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/hive/db.dart'; +import 'package:stackwallet/providers/global/prefs_provider.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/light_colors.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; -import '../../../providers/global/prefs_provider.dart'; -import '../../../utilities/constants.dart'; -import '../../../widgets/custom_buttons/draggable_switch_button.dart'; - class AppearanceOptionSettings extends ConsumerStatefulWidget { const AppearanceOptionSettings({Key? key}) : super(key: key); @@ -140,7 +143,10 @@ class _AppearanceOptionSettings ], ), ), - ThemeToggle(), + const Padding( + padding: EdgeInsets.all(10), + child: ThemeToggle(), + ), ], ), ), @@ -150,7 +156,7 @@ class _AppearanceOptionSettings } } -class ThemeToggle extends StatefulWidget { +class ThemeToggle extends ConsumerStatefulWidget { const ThemeToggle({ Key? key, }) : super(key: key); @@ -159,187 +165,226 @@ class ThemeToggle extends StatefulWidget { // final void Function(bool)? onChanged; @override - State createState() => _ThemeToggle(); + ConsumerState createState() => _ThemeToggle(); } -class _ThemeToggle extends State { +class _ThemeToggle extends ConsumerState { // late bool externalCallsEnabled; + 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) { return Row( - // mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: RawMaterialButton( - elevation: 0, - hoverColor: Colors.transparent, - shape: RoundedRectangleBorder( - side: BorderSide( - color: - Theme.of(context).extension()!.infoItemIcons, - width: 2, - ), - // side: !externalCallsEnabled - // ? BorderSide.none - // : BorderSide( - // color: Theme.of(context) - // .extension()! - // .infoItemIcons, - // width: 2, - // ), - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius * 2, - ), - ), - onPressed: () {}, //onPressed - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Stack( - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsets.only( - left: 24, - ), - child: SvgPicture.asset( - Assets.svg.themeLight, - ), - ), - Padding( - padding: const EdgeInsets.only( - left: 50, - top: 12, - ), - child: Text( - "Light", - style: STextStyles.desktopTextExtraSmall(context) - .copyWith( - color: Theme.of(context) - .extension()! - .textDark, - ), - ), - ) - ], - ), - // if (externalCallsEnabled) - Positioned( - bottom: 0, - left: 6, - child: SvgPicture.asset( - Assets.svg.checkCircle, - width: 20, - height: 20, - color: Theme.of(context) - .extension()! - .infoItemIcons, - ), - ), - // if (!externalCallsEnabled) - // Positioned( - // bottom: 0, - // left: 6, - // child: Container( - // width: 20, - // height: 20, - // decoration: BoxDecoration( - // borderRadius: BorderRadius.circular(1000), - // color: Theme.of(context) - // .extension()! - // .textFieldDefaultBG, - // ), - // ), - // ), - ], - ), + MaterialButton( + splashColor: Colors.transparent, + hoverColor: Colors.transparent, + padding: const EdgeInsets.all(0), + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, ), ), - ), - const SizedBox( - width: 1, - ), - Expanded( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: RawMaterialButton( - elevation: 0, - hoverColor: Colors.transparent, - shape: RoundedRectangleBorder( - // side: !externalCallsEnabled - // ? BorderSide.none - // : BorderSide( - // color: Theme.of(context) - // .extension()! - // .infoItemIcons, - // width: 2, - // ), - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius * 2, - ), - ), - onPressed: () {}, //onPressed - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Stack( - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SvgPicture.asset( - Assets.svg.themeDark, - ), - Padding( - padding: const EdgeInsets.only( - left: 45, - top: 12, - ), - child: Text( - "Dark", - style: STextStyles.desktopTextExtraSmall(context) - .copyWith( - color: Theme.of(context) - .extension()! - .textDark, - ), - ), - ), - ], - ), - // if (externalCallsEnabled) - // Positioned( - // bottom: 0, - // left: 0, - // child: SvgPicture.asset( - // Assets.svg.checkCircle, - // width: 20, - // height: 20, - // color: Theme.of(context) - // .extension()! - // .infoItemIcons, - // ), - // ), - // if (!externalCallsEnabled) - Positioned( - bottom: 0, - left: 0, - child: Container( - width: 20, - height: 20, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(1000), - color: Theme.of(context) + 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: [ + Container( + decoration: BoxDecoration( + border: Border.all( + width: 2.5, + color: _selectedTheme == "light" + ? Theme.of(context) .extension()! - .textFieldDefaultBG, - ), + .infoItemIcons + : Theme.of(context).extension()!.popupBG, + ), + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + child: SvgPicture.asset( + Assets.svg.themeLight, + ), + ), + const SizedBox( + height: 12, + ), + Row( + children: [ + SizedBox( + width: 20, + height: 20, + 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()! + .textDark, ), ), ], ), - ), + ], + ), + ), + ), + const SizedBox( + width: 20, + ), + 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: [ + Container( + decoration: BoxDecoration( + border: Border.all( + width: 2.5, + color: _selectedTheme == "dark" + ? Theme.of(context) + .extension()! + .infoItemIcons + : Theme.of(context).extension()!.popupBG, + ), + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + child: SvgPicture.asset( + Assets.svg.themeDark, + ), + ), + const SizedBox( + height: 12, + ), + Row( + children: [ + SizedBox( + width: 20, + height: 20, + 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()! + .textDark, + ), + ), + ], + ), + ], ), ), ),