mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-03-16 00:21:55 +00:00
system brightness theme selection gui updates
This commit is contained in:
julian
parent
9a23e311fd
commit
9ab156562a
5 changed files with 408 additions and 431 deletions
|
|
@ -1,22 +1,14 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_options_widget.dart';
|
||||
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.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/stack_colors.dart';
|
||||
import 'package:stackwallet/widgets/background.dart';
|
||||
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
|
||||
import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
|
||||
import 'package:stackwallet/widgets/expandable.dart';
|
||||
import 'package:stackwallet/widgets/rounded_container.dart';
|
||||
import 'package:stackwallet/widgets/rounded_white_container.dart';
|
||||
import 'package:tuple/tuple.dart';
|
||||
|
||||
class AppearanceSettingsView extends ConsumerWidget {
|
||||
const AppearanceSettingsView({Key? key}) : super(key: key);
|
||||
|
|
@ -106,56 +98,43 @@ class AppearanceSettingsView extends ConsumerWidget {
|
|||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
const SystemBrightnessToggle(),
|
||||
if (!ref.watch(
|
||||
prefsChangeNotifierProvider
|
||||
.select((value) => value.enableSystemBrightness),
|
||||
))
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
if (!ref.watch(
|
||||
prefsChangeNotifierProvider
|
||||
.select((value) => value.enableSystemBrightness),
|
||||
))
|
||||
RoundedWhiteContainer(
|
||||
RoundedWhiteContainer(
|
||||
padding: const EdgeInsets.all(0),
|
||||
child: RawMaterialButton(
|
||||
// splashColor: Theme.of(context).extension<StackColors>()!.highlight,
|
||||
padding: const EdgeInsets.all(0),
|
||||
child: RawMaterialButton(
|
||||
// splashColor: Theme.of(context).extension<StackColors>()!.highlight,
|
||||
padding: const EdgeInsets.all(0),
|
||||
materialTapTargetSize:
|
||||
MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
materialTapTargetSize:
|
||||
MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
onPressed: null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Choose Theme",
|
||||
style:
|
||||
STextStyles.titleBold12(context),
|
||||
textAlign: TextAlign.left,
|
||||
),
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ThemeOptionsWidget(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
onPressed: null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Choose Theme",
|
||||
style: STextStyles.titleBold12(context),
|
||||
textAlign: TextAlign.left,
|
||||
),
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ThemeOptionsWidget(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
@ -168,235 +147,3 @@ class AppearanceSettingsView extends ConsumerWidget {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SystemBrightnessToggle extends ConsumerStatefulWidget {
|
||||
const SystemBrightnessToggle({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
ConsumerState<SystemBrightnessToggle> createState() =>
|
||||
_SystemBrightnessToggleState();
|
||||
}
|
||||
|
||||
class _SystemBrightnessToggleState
|
||||
extends ConsumerState<SystemBrightnessToggle> {
|
||||
final controller = ExpandableController();
|
||||
|
||||
void _toggle(bool enable) {
|
||||
ref.read(prefsChangeNotifierProvider).enableSystemBrightness = enable;
|
||||
|
||||
if (enable && controller.state == ExpandableState.collapsed) {
|
||||
controller.toggle?.call();
|
||||
} else if (!enable && controller.state == ExpandableState.expanded) {
|
||||
controller.toggle?.call();
|
||||
}
|
||||
|
||||
if (enable) {
|
||||
final ThemeType type;
|
||||
switch (MediaQuery.of(context).platformBrightness) {
|
||||
case Brightness.dark:
|
||||
type = ref
|
||||
.read(prefsChangeNotifierProvider.notifier)
|
||||
.systemBrightnessDarkTheme;
|
||||
break;
|
||||
case Brightness.light:
|
||||
type = ref
|
||||
.read(prefsChangeNotifierProvider.notifier)
|
||||
.systemBrightnessLightTheme;
|
||||
break;
|
||||
}
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
type.colorTheme,
|
||||
);
|
||||
} else {
|
||||
ref.read(prefsChangeNotifierProvider.notifier).theme =
|
||||
ref.read(colorThemeProvider.notifier).state.themeType;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
if (ref.read(prefsChangeNotifierProvider).enableSystemBrightness) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
controller.toggle?.call();
|
||||
});
|
||||
}
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final enable = ref.watch(
|
||||
prefsChangeNotifierProvider
|
||||
.select((value) => value.enableSystemBrightness),
|
||||
);
|
||||
|
||||
return RoundedWhiteContainer(
|
||||
child: Expandable(
|
||||
controller: controller,
|
||||
expandOverride: () {
|
||||
_toggle(
|
||||
!ref.read(prefsChangeNotifierProvider).enableSystemBrightness);
|
||||
},
|
||||
header: RawMaterialButton(
|
||||
splashColor: Theme.of(context).extension<StackColors>()!.highlight,
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
onPressed: null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
"System brightness",
|
||||
style: STextStyles.titleBold12(context),
|
||||
textAlign: TextAlign.left,
|
||||
),
|
||||
SizedBox(
|
||||
key: Key("${enable}enableSystemBrightnessToggleKey"),
|
||||
height: 20,
|
||||
width: 40,
|
||||
child: DraggableSwitchButton(
|
||||
isOn: enable,
|
||||
onValueChanged: _toggle,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
RoundedContainer(
|
||||
color: Colors.transparent,
|
||||
padding: EdgeInsets.zero,
|
||||
onPressed: () async {
|
||||
final result = await Navigator.of(context).pushNamed(
|
||||
SystemBrightnessThemeSelectionView.routeName,
|
||||
arguments: Tuple2(
|
||||
"light",
|
||||
ref
|
||||
.read(prefsChangeNotifierProvider)
|
||||
.systemBrightnessLightTheme),
|
||||
);
|
||||
if (result is ThemeType) {
|
||||
ref
|
||||
.read(prefsChangeNotifierProvider)
|
||||
.systemBrightnessLightTheme = result;
|
||||
if (ref
|
||||
.read(prefsChangeNotifierProvider)
|
||||
.enableSystemBrightness) {
|
||||
if (mounted &&
|
||||
MediaQuery.of(context).platformBrightness ==
|
||||
Brightness.light) {
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(result.colorTheme);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Light theme",
|
||||
style: STextStyles.itemSubtitle(context),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
Text(
|
||||
ref
|
||||
.watch(
|
||||
prefsChangeNotifierProvider.select((value) =>
|
||||
value.systemBrightnessLightTheme),
|
||||
)
|
||||
.prettyName,
|
||||
style: STextStyles.itemSubtitle12(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SvgPicture.asset(
|
||||
Assets.svg.chevronRight,
|
||||
color: Theme.of(context).extension<StackColors>()!.textDark,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
RoundedContainer(
|
||||
color: Colors.transparent,
|
||||
padding: EdgeInsets.zero,
|
||||
onPressed: () async {
|
||||
final result = await Navigator.of(context).pushNamed(
|
||||
SystemBrightnessThemeSelectionView.routeName,
|
||||
arguments: Tuple2(
|
||||
"dark",
|
||||
ref
|
||||
.read(prefsChangeNotifierProvider)
|
||||
.systemBrightnessDarkTheme),
|
||||
);
|
||||
if (result is ThemeType) {
|
||||
ref
|
||||
.read(prefsChangeNotifierProvider)
|
||||
.systemBrightnessDarkTheme = result;
|
||||
if (ref
|
||||
.read(prefsChangeNotifierProvider)
|
||||
.enableSystemBrightness) {
|
||||
if (mounted &&
|
||||
MediaQuery.of(context).platformBrightness ==
|
||||
Brightness.dark) {
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(result.colorTheme);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Dark theme",
|
||||
style: STextStyles.itemSubtitle(context),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
Text(
|
||||
ref.watch(
|
||||
prefsChangeNotifierProvider.select((value) =>
|
||||
value.systemBrightnessDarkTheme.prettyName),
|
||||
),
|
||||
style: STextStyles.itemSubtitle12(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SvgPicture.asset(
|
||||
Assets.svg.chevronRight,
|
||||
color: Theme.of(context).extension<StackColors>()!.textDark,
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
import 'package:flutter/material.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/stack_colors.dart';
|
||||
|
||||
class ThemeOption extends StatelessWidget {
|
||||
const ThemeOption(
|
||||
{Key? key,
|
||||
required this.onPressed,
|
||||
required this.onChanged,
|
||||
required this.value,
|
||||
required this.groupValue})
|
||||
: super(key: key);
|
||||
class ThemeOption<T> extends StatelessWidget {
|
||||
const ThemeOption({
|
||||
Key? key,
|
||||
required this.onPressed,
|
||||
required this.onChanged,
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.groupValue,
|
||||
}) : super(key: key);
|
||||
|
||||
final VoidCallback onPressed;
|
||||
final void Function(Object?) onChanged;
|
||||
final ThemeType value;
|
||||
final ThemeType groupValue;
|
||||
final String label;
|
||||
final T value;
|
||||
final T groupValue;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
|
@ -39,9 +40,9 @@ class ThemeOption extends StatelessWidget {
|
|||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 10,
|
||||
height: 10,
|
||||
child: Radio(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: Radio<T>(
|
||||
activeColor: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.radioButtonIconEnabled,
|
||||
|
|
@ -54,7 +55,7 @@ class ThemeOption extends StatelessWidget {
|
|||
width: 14,
|
||||
),
|
||||
Text(
|
||||
value.prettyName,
|
||||
label,
|
||||
style: STextStyles.desktopTextExtraSmall(context).copyWith(
|
||||
color:
|
||||
Theme.of(context).extension<StackColors>()!.textDark2,
|
||||
|
|
|
|||
|
|
@ -1,49 +1,199 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart';
|
||||
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.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/stack_colors.dart';
|
||||
import 'package:stackwallet/widgets/conditional_parent.dart';
|
||||
import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
|
||||
|
||||
class ThemeOptionsWidget extends ConsumerWidget {
|
||||
class ThemeOptionsWidget extends ConsumerStatefulWidget {
|
||||
const ThemeOptionsWidget({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
ConsumerState<ThemeOptionsWidget> createState() => _ThemeOptionsWidgetState();
|
||||
}
|
||||
|
||||
class _ThemeOptionsWidgetState extends ConsumerState<ThemeOptionsWidget> {
|
||||
final systemDefault = ThemeType.values.length;
|
||||
late int _current;
|
||||
|
||||
void setTheme(int index) {
|
||||
if (index == _current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (index == systemDefault) {
|
||||
// update current index
|
||||
_current = index;
|
||||
|
||||
// enable system brightness setting
|
||||
ref.read(prefsChangeNotifierProvider).enableSystemBrightness = true;
|
||||
|
||||
// get theme
|
||||
final ThemeType theme;
|
||||
switch (MediaQuery.of(context).platformBrightness) {
|
||||
case Brightness.dark:
|
||||
theme = ref
|
||||
.read(prefsChangeNotifierProvider.notifier)
|
||||
.systemBrightnessDarkTheme;
|
||||
break;
|
||||
case Brightness.light:
|
||||
theme = ref
|
||||
.read(prefsChangeNotifierProvider.notifier)
|
||||
.systemBrightnessLightTheme;
|
||||
break;
|
||||
}
|
||||
|
||||
// apply theme
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
theme.colorTheme,
|
||||
);
|
||||
|
||||
Assets.precache(context);
|
||||
} else {
|
||||
if (_current == systemDefault) {
|
||||
// disable system brightness setting
|
||||
ref.read(prefsChangeNotifierProvider).enableSystemBrightness = false;
|
||||
}
|
||||
|
||||
// update current index
|
||||
_current = index;
|
||||
|
||||
// get theme
|
||||
final theme = ThemeType.values[index];
|
||||
|
||||
// save theme setting
|
||||
ref.read(prefsChangeNotifierProvider.notifier).theme = theme;
|
||||
|
||||
// apply theme
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
theme.colorTheme,
|
||||
);
|
||||
|
||||
Assets.precache(context);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
if (ref.read(prefsChangeNotifierProvider).enableSystemBrightness) {
|
||||
_current = ThemeType.values.length;
|
||||
} else {
|
||||
_current =
|
||||
ThemeType.values.indexOf(ref.read(prefsChangeNotifierProvider).theme);
|
||||
}
|
||||
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
for (int i = 0; i < (2 * ThemeType.values.length) - 1; i++)
|
||||
(i % 2 == 1)
|
||||
? const SizedBox(
|
||||
height: 10,
|
||||
)
|
||||
: ThemeOption(
|
||||
onPressed: () {
|
||||
ref.read(prefsChangeNotifierProvider.notifier).theme =
|
||||
ThemeType.values[i ~/ 2];
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
ThemeType.values[i ~/ 2].colorTheme,
|
||||
);
|
||||
Assets.precache(context);
|
||||
},
|
||||
onChanged: (newValue) {
|
||||
if (newValue == ThemeType.values[i ~/ 2]) {
|
||||
ref.read(prefsChangeNotifierProvider.notifier).theme =
|
||||
ThemeType.values[i ~/ 2];
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
ThemeType.values[i ~/ 2].colorTheme,
|
||||
);
|
||||
Assets.precache(context);
|
||||
}
|
||||
},
|
||||
value: ThemeType.values[i ~/ 2],
|
||||
groupValue:
|
||||
Theme.of(context).extension<StackColors>()!.themeType,
|
||||
MaterialButton(
|
||||
splashColor: Colors.transparent,
|
||||
hoverColor: Colors.transparent,
|
||||
padding: const EdgeInsets.all(0),
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
onPressed: () {
|
||||
setTheme(systemDefault);
|
||||
},
|
||||
child: SizedBox(
|
||||
width: 200,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 20,
|
||||
height: 26,
|
||||
child: Radio(
|
||||
activeColor: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.radioButtonIconEnabled,
|
||||
value: ThemeType.values.length,
|
||||
groupValue: _current,
|
||||
onChanged: (newValue) {
|
||||
if (newValue is int) {
|
||||
setTheme(newValue);
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 14,
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"System default",
|
||||
style: STextStyles.desktopTextExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark2,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
CustomTextButton(
|
||||
text: "Options",
|
||||
onTap: () {
|
||||
Navigator.of(context).pushNamed(
|
||||
SystemBrightnessThemeSelectionView.routeName,
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
for (int i = 0; i < ThemeType.values.length; i++)
|
||||
ConditionalParent(
|
||||
condition: i > 0,
|
||||
builder: (child) => Padding(
|
||||
padding: const EdgeInsets.only(top: 10),
|
||||
child: child,
|
||||
),
|
||||
child: ThemeOption(
|
||||
label: ThemeType.values[i].prettyName,
|
||||
onPressed: () {
|
||||
setTheme(i);
|
||||
},
|
||||
onChanged: (newValue) {
|
||||
if (newValue is int) {
|
||||
setTheme(newValue);
|
||||
}
|
||||
},
|
||||
value: i,
|
||||
groupValue: _current,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/sub_widgets/theme_option.dart';
|
||||
import 'package:stackwallet/utilities/constants.dart';
|
||||
import 'package:stackwallet/providers/global/prefs_provider.dart';
|
||||
import 'package:stackwallet/providers/ui/color_theme_provider.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/color_theme.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
|
@ -8,20 +10,41 @@ import 'package:stackwallet/widgets/background.dart';
|
|||
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
|
||||
import 'package:stackwallet/widgets/rounded_white_container.dart';
|
||||
|
||||
class SystemBrightnessThemeSelectionView extends StatelessWidget {
|
||||
class SystemBrightnessThemeSelectionView extends ConsumerWidget {
|
||||
const SystemBrightnessThemeSelectionView({
|
||||
Key? key,
|
||||
required this.brightness,
|
||||
required this.current,
|
||||
}) : super(key: key);
|
||||
|
||||
final String brightness;
|
||||
final ThemeType current;
|
||||
|
||||
static const String routeName = "/chooseSystemTheme";
|
||||
|
||||
void _setTheme({
|
||||
required BuildContext context,
|
||||
required bool isDark,
|
||||
required ThemeType type,
|
||||
required WidgetRef ref,
|
||||
}) {
|
||||
final brightness = MediaQuery.of(context).platformBrightness;
|
||||
if (isDark) {
|
||||
ref.read(prefsChangeNotifierProvider).systemBrightnessDarkTheme = type;
|
||||
if (brightness == Brightness.dark) {
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
type.colorTheme,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
ref.read(prefsChangeNotifierProvider).systemBrightnessLightTheme = type;
|
||||
if (brightness == Brightness.light) {
|
||||
ref.read(colorThemeProvider.notifier).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
type.colorTheme,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
return Background(
|
||||
child: Scaffold(
|
||||
backgroundColor: Theme.of(context).extension<StackColors>()!.background,
|
||||
|
|
@ -32,97 +55,160 @@ class SystemBrightnessThemeSelectionView extends StatelessWidget {
|
|||
},
|
||||
),
|
||||
title: Text(
|
||||
"Choose $brightness theme",
|
||||
"System default theme",
|
||||
style: STextStyles.navBarTitle(context),
|
||||
),
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return SingleChildScrollView(
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: constraints.maxHeight,
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return SingleChildScrollView(
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: constraints.maxHeight,
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 16,
|
||||
),
|
||||
RoundedWhiteContainer(
|
||||
padding: const EdgeInsets.all(0),
|
||||
child: RawMaterialButton(
|
||||
// splashColor: Theme.of(context).extension<StackColors>()!.highlight,
|
||||
padding: const EdgeInsets.all(0),
|
||||
materialTapTargetSize:
|
||||
MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
onPressed: null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Column(
|
||||
children: [
|
||||
for (int i = 0;
|
||||
i <
|
||||
(2 *
|
||||
ThemeType.values
|
||||
.length) -
|
||||
1;
|
||||
i++)
|
||||
(i % 2 == 1)
|
||||
? const SizedBox(
|
||||
height: 10,
|
||||
)
|
||||
: ThemeOption(
|
||||
onPressed: () {
|
||||
Navigator.of(context)
|
||||
.pop(ThemeType
|
||||
.values[
|
||||
i ~/ 2]);
|
||||
},
|
||||
onChanged: (newValue) {
|
||||
if (newValue ==
|
||||
ThemeType.values[
|
||||
i ~/ 2]) {
|
||||
Navigator.of(context)
|
||||
.pop(ThemeType
|
||||
.values[
|
||||
i ~/ 2]);
|
||||
}
|
||||
},
|
||||
value: ThemeType
|
||||
.values[i ~/ 2],
|
||||
groupValue: current,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
"Select a light and dark theme that will be"
|
||||
" activated automatically when your phone system"
|
||||
" switches light and dark mode.",
|
||||
style: STextStyles.smallMed12(context),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
RoundedWhiteContainer(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Choose dark mode theme",
|
||||
style: STextStyles.titleBold12(context),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 18,
|
||||
),
|
||||
for (int i = 0;
|
||||
i < (2 * ThemeType.values.length) - 1;
|
||||
i++)
|
||||
(i % 2 == 1)
|
||||
? const SizedBox(
|
||||
height: 10,
|
||||
)
|
||||
: ThemeOption(
|
||||
label:
|
||||
ThemeType.values[i ~/ 2].prettyName,
|
||||
onPressed: () {
|
||||
_setTheme(
|
||||
context: context,
|
||||
isDark: false,
|
||||
type: ThemeType.values[i ~/ 2],
|
||||
ref: ref,
|
||||
);
|
||||
},
|
||||
onChanged: (newValue) {
|
||||
final value =
|
||||
ThemeType.values[i ~/ 2];
|
||||
if (newValue == value &&
|
||||
ref
|
||||
.read(
|
||||
prefsChangeNotifierProvider)
|
||||
.systemBrightnessLightTheme !=
|
||||
value) {
|
||||
_setTheme(
|
||||
context: context,
|
||||
isDark: false,
|
||||
type: value,
|
||||
ref: ref,
|
||||
);
|
||||
}
|
||||
},
|
||||
value: ThemeType.values[i ~/ 2],
|
||||
groupValue: ref.watch(
|
||||
prefsChangeNotifierProvider.select(
|
||||
(value) => value
|
||||
.systemBrightnessLightTheme)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
RoundedWhiteContainer(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Choose dark mode theme",
|
||||
style: STextStyles.titleBold12(context),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 18,
|
||||
),
|
||||
for (int i = 0;
|
||||
i < (2 * ThemeType.values.length) - 1;
|
||||
i++)
|
||||
(i % 2 == 1)
|
||||
? const SizedBox(
|
||||
height: 10,
|
||||
)
|
||||
: ThemeOption(
|
||||
label:
|
||||
ThemeType.values[i ~/ 2].prettyName,
|
||||
onPressed: () {
|
||||
_setTheme(
|
||||
context: context,
|
||||
isDark: true,
|
||||
type: ThemeType.values[i ~/ 2],
|
||||
ref: ref,
|
||||
);
|
||||
},
|
||||
onChanged: (newValue) {
|
||||
final value =
|
||||
ThemeType.values[i ~/ 2];
|
||||
if (newValue == value &&
|
||||
ref
|
||||
.read(
|
||||
prefsChangeNotifierProvider)
|
||||
.systemBrightnessDarkTheme !=
|
||||
value) {
|
||||
_setTheme(
|
||||
context: context,
|
||||
isDark: true,
|
||||
type: value,
|
||||
ref: ref,
|
||||
);
|
||||
}
|
||||
},
|
||||
value: ThemeType.values[i ~/ 2],
|
||||
groupValue: ref.watch(
|
||||
prefsChangeNotifierProvider.select(
|
||||
(value) => value
|
||||
.systemBrightnessDarkTheme)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 16,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -148,7 +148,6 @@ import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_
|
|||
import 'package:stackwallet/utilities/amount/amount.dart';
|
||||
import 'package:stackwallet/utilities/enums/add_wallet_type_enum.dart';
|
||||
import 'package:stackwallet/utilities/enums/coin_enum.dart';
|
||||
import 'package:stackwallet/utilities/theme/color_theme.dart';
|
||||
import 'package:tuple/tuple.dart';
|
||||
|
||||
class RouteGenerator {
|
||||
|
|
@ -762,19 +761,13 @@ class RouteGenerator {
|
|||
return _routeError("${settings.name} invalid args: ${args.toString()}");
|
||||
|
||||
case SystemBrightnessThemeSelectionView.routeName:
|
||||
if (args is Tuple2<String, ThemeType>) {
|
||||
return getRoute(
|
||||
shouldUseMaterialRoute: useMaterialPageRoute,
|
||||
builder: (_) => SystemBrightnessThemeSelectionView(
|
||||
brightness: args.item1,
|
||||
current: args.item2,
|
||||
),
|
||||
settings: RouteSettings(
|
||||
name: settings.name,
|
||||
),
|
||||
);
|
||||
}
|
||||
return _routeError("${settings.name} invalid args: ${args.toString()}");
|
||||
return getRoute(
|
||||
shouldUseMaterialRoute: useMaterialPageRoute,
|
||||
builder: (_) => const SystemBrightnessThemeSelectionView(),
|
||||
settings: RouteSettings(
|
||||
name: settings.name,
|
||||
),
|
||||
);
|
||||
|
||||
case WalletNetworkSettingsView.routeName:
|
||||
if (args is Tuple3<String, WalletSyncStatus, NodeConnectionStatus>) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue