mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-13 14:14:41 +00:00
mobile appearance settings code cleanup
This commit is contained in:
parent
67e7e6e421
commit
9dc8d93214
1 changed files with 104 additions and 529 deletions
|
@ -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<ThemeOptionsView> createState() => _ThemeOptionsView();
|
||||
}
|
||||
|
||||
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) {
|
||||
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<dynamic>(
|
||||
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<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,
|
||||
),
|
||||
),
|
||||
],
|
||||
for (int i = 0; i < (2 * ThemeType.values.length) - 1; i++)
|
||||
(i % 2 == 1)
|
||||
? const SizedBox(
|
||||
height: 10,
|
||||
)
|
||||
: ThemeOption(
|
||||
onPressed: () {
|
||||
DB.instance.put<dynamic>(
|
||||
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<dynamic>(
|
||||
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<StackColors>()!.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<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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue