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

mobile appearance settings code cleanup

Browse source
This commit is contained in:
julian 2023-03-17 10:47:59 -06:00
parent 67e7e6e421
commit 9dc8d93214
1 changed files with 104 additions and 529 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

633
lib/pages/settings_views/global_settings_view/appearance_settings_view.dart
View file

@ -3,15 +3,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/hive/db.dart'; import 'package:stackwallet/hive/db.dart';
import 'package:stackwallet/providers/providers.dart'; import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/providers/ui/color_theme_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/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/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/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/background.dart'; import 'package:stackwallet/widgets/background.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.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"; 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 @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return Background( return Background(
@ -175,516 +151,115 @@ class AppearanceSettingsView extends ConsumerWidget {
} }
} }
class ThemeOptionsView extends ConsumerStatefulWidget { class ThemeOptionsView extends ConsumerWidget {
const ThemeOptionsView({ const ThemeOptionsView({Key? key}) : super(key: key);
Key? key,
}) : super(key: key);
@override @override
ConsumerState<ThemeOptionsView> createState() => _ThemeOptionsView(); Widget build(BuildContext context, WidgetRef ref) {
}
class _ThemeOptionsView extends ConsumerState<ThemeOptionsView> {
late String _selectedTheme;
@override
void initState() {
_selectedTheme =
DB.instance.get<dynamic>(boxName: DB.boxNameTheme, key: "colorScheme")
as String? ??
"light";
super.initState();
}
@override
Widget build(BuildContext context) {
return Column( return Column(
children: [ children: [
MaterialButton( for (int i = 0; i < (2 * ThemeType.values.length) - 1; i++)
splashColor: Colors.transparent, (i % 2 == 1)
hoverColor: Colors.transparent, ? const SizedBox(
padding: const EdgeInsets.all(0), height: 10,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, )
shape: RoundedRectangleBorder( : ThemeOption(
borderRadius: BorderRadius.circular( onPressed: () {
Constants.size.circularBorderRadius, DB.instance.put<dynamic>(
), boxName: DB.boxNameTheme,
), key: "colorScheme",
onPressed: () { value: ThemeType.values[i ~/ 2].name,
DB.instance.put<dynamic>( );
boxName: DB.boxNameTheme, ref.read(colorThemeProvider.state).state =
key: "colorScheme", StackColors.fromStackColorTheme(
value: ThemeType.light.name, ThemeType.values[i ~/ 2].colorTheme,
); );
ref.read(colorThemeProvider.state).state = Assets.precache(context);
StackColors.fromStackColorTheme( },
LightColors(), onChanged: (newValue) {
); if (newValue == ThemeType.values[i ~/ 2]) {
DB.instance.put<dynamic>(
setState(() { boxName: DB.boxNameTheme,
_selectedTheme = "light"; key: "colorScheme",
}); value: ThemeType.values[i ~/ 2].name,
}, );
child: SizedBox( ref.read(colorThemeProvider.state).state =
width: 200, StackColors.fromStackColorTheme(
child: Column( ThemeType.values[i ~/ 2].colorTheme,
mainAxisSize: MainAxisSize.min, );
children: [ Assets.precache(context);
Row( }
children: [ },
SizedBox( value: ThemeType.values[i ~/ 2],
width: 10, groupValue:
height: 10, Theme.of(context).extension<StackColors>()!.themeType,
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>()!
.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<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: [
Row(
children: [
SizedBox(
width: 10,
height: 10,
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>()!
.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<dynamic>(
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<StackColors>()!
.radioButtonIconEnabled,
value: "oceanBreeze",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "oceanBreeze") {
DB.instance.put<dynamic>(
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<StackColors>()!
.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<dynamic>(
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<StackColors>()!
.radioButtonIconEnabled,
value: "oledBlack",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "oledBlack") {
DB.instance.put<dynamic>(
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<StackColors>()!
.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<dynamic>(
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<StackColors>()!
.radioButtonIconEnabled,
value: "fruitSorbet",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "fruitSorbet") {
DB.instance.put<dynamic>(
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<StackColors>()!
.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<dynamic>(
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<StackColors>()!
.radioButtonIconEnabled,
value: "forest",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "forest") {
DB.instance.put<dynamic>(
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<StackColors>()!
.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<StackColors>()!
.radioButtonIconEnabled,
value: value,
groupValue: groupValue,
onChanged: onChanged,
),
),
const SizedBox(
width: 14,
),
Text(
value.prettyName,
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color:
Theme.of(context).extension<StackColors>()!.textDark2,
),
),
],
),
],
),
),
);
}
}