Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2025-01-11 13:14:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

desktop theme toggle

Browse source
This commit is contained in:
julian 2022-11-07 15:48:16 -06:00
parent c962f597fd
commit b3a343d28a
1 changed files with 218 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

391
lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart
View file

@ -1,16 +1,19 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.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/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.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/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.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 { class AppearanceOptionSettings extends ConsumerStatefulWidget {
const AppearanceOptionSettings({Key? key}) : super(key: key); 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({ const ThemeToggle({
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -159,187 +165,226 @@ class ThemeToggle extends StatefulWidget {
// final void Function(bool)? onChanged; // final void Function(bool)? onChanged;
@override @override
State<StatefulWidget> createState() => _ThemeToggle(); ConsumerState<ThemeToggle> createState() => _ThemeToggle();
} }
class _ThemeToggle extends State<ThemeToggle> { class _ThemeToggle extends ConsumerState<ThemeToggle> {
// late bool externalCallsEnabled; // late bool externalCallsEnabled;
late String _selectedTheme;
@override
void initState() {
_selectedTheme =
DB.instance.get<dynamic>(boxName: DB.boxNameTheme, key: "colorScheme")
as String? ??
"light";
super.initState();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Row( return Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
Padding( MaterialButton(
padding: const EdgeInsets.all(8.0), splashColor: Colors.transparent,
child: RawMaterialButton( hoverColor: Colors.transparent,
elevation: 0, padding: const EdgeInsets.all(0),
hoverColor: Colors.transparent, materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
side: BorderSide( borderRadius: BorderRadius.circular(
color: Constants.size.circularBorderRadius,
Theme.of(context).extension<StackColors>()!.infoItemIcons,
width: 2,
),
// side: !externalCallsEnabled
// ? BorderSide.none
// : BorderSide(
// color: Theme.of(context)
// .extension<StackColors>()!
// .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<StackColors>()!
.textDark,
),
),
)
],
),
// if (externalCallsEnabled)
Positioned(
bottom: 0,
left: 6,
child: SvgPicture.asset(
Assets.svg.checkCircle,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.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<StackColors>()!
// .textFieldDefaultBG,
// ),
// ),
// ),
],
),
), ),
), ),
), onPressed: () {
const SizedBox( DB.instance.put<dynamic>(
width: 1, boxName: DB.boxNameTheme,
), key: "colorScheme",
Expanded( value: ThemeType.light.name,
child: Padding( );
padding: const EdgeInsets.all(8.0), ref.read(colorThemeProvider.state).state =
child: RawMaterialButton( StackColors.fromStackColorTheme(
elevation: 0, LightColors(),
hoverColor: Colors.transparent, );
shape: RoundedRectangleBorder(
// side: !externalCallsEnabled setState(() {
// ? BorderSide.none _selectedTheme = "light";
// : BorderSide( });
// color: Theme.of(context) },
// .extension<StackColors>()! child: SizedBox(
// .infoItemIcons, width: 200,
// width: 2, child: Column(
// ), mainAxisSize: MainAxisSize.min,
borderRadius: BorderRadius.circular( children: [
Constants.size.circularBorderRadius * 2, Container(
), decoration: BoxDecoration(
), border: Border.all(
onPressed: () {}, //onPressed width: 2.5,
child: Padding( color: _selectedTheme == "light"
padding: const EdgeInsets.all(8.0), ? Theme.of(context)
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<StackColors>()!
.textDark,
),
),
),
],
),
// if (externalCallsEnabled)
// Positioned(
// bottom: 0,
// left: 0,
// child: SvgPicture.asset(
// Assets.svg.checkCircle,
// width: 20,
// height: 20,
// color: Theme.of(context)
// .extension<StackColors>()!
// .infoItemIcons,
// ),
// ),
// if (!externalCallsEnabled)
Positioned(
bottom: 0,
left: 0,
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1000),
color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textFieldDefaultBG, .infoItemIcons
), : Theme.of(context).extension<StackColors>()!.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<StackColors>()!
.radioButtonIconEnabled,
value: "light",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "light") {
DB.instance.put<dynamic>(
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<StackColors>()!
.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<dynamic>(
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<StackColors>()!
.infoItemIcons
: Theme.of(context).extension<StackColors>()!.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<StackColors>()!
.radioButtonIconEnabled,
value: "dark",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "dark") {
DB.instance.put<dynamic>(
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<StackColors>()!
.textDark,
),
),
],
),
],
), ),
), ),
), ),