WIP appearance settings code organisation

This commit is contained in:
julian 2023-04-13 13:04:08 -06:00
parent 362c708225
commit 9a23e311fd
6 changed files with 256 additions and 231 deletions

View file

@ -1,6 +1,8 @@
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';
@ -145,7 +147,7 @@ class AppearanceSettingsView extends ConsumerWidget {
),
const Padding(
padding: EdgeInsets.all(10),
child: ThemeOptionsView(),
child: ThemeOptionsWidget(),
),
],
),
@ -398,231 +400,3 @@ class _SystemBrightnessToggleState
);
}
}
class ThemeOptionsView extends ConsumerWidget {
const ThemeOptionsView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
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,
),
],
);
}
}
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,
),
),
],
),
],
),
),
);
}
}
class SystemBrightnessThemeSelectionView extends StatelessWidget {
const SystemBrightnessThemeSelectionView({
Key? key,
required this.brightness,
required this.current,
}) : super(key: key);
final String brightness;
final ThemeType current;
static const String routeName = "/chooseSystemTheme";
@override
Widget build(BuildContext context) {
return Background(
child: Scaffold(
backgroundColor: Theme.of(context).extension<StackColors>()!.background,
appBar: AppBar(
leading: AppBarBackButton(
onPressed: () async {
Navigator.of(context).pop();
},
),
title: Text(
"Choose $brightness 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(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
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,
),
],
),
),
],
),
],
),
),
),
),
],
),
),
),
);
},
),
),
),
);
}
}

View file

@ -0,0 +1,70 @@
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);
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,
),
),
],
),
],
),
),
);
}
}

View file

@ -0,0 +1,50 @@
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/providers/providers.dart';
import 'package:stackwallet/providers/ui/color_theme_provider.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
class ThemeOptionsWidget extends ConsumerWidget {
const ThemeOptionsWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
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,
),
],
);
}
}

View file

@ -0,0 +1,130 @@
import 'package:flutter/material.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/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/rounded_white_container.dart';
class SystemBrightnessThemeSelectionView extends StatelessWidget {
const SystemBrightnessThemeSelectionView({
Key? key,
required this.brightness,
required this.current,
}) : super(key: key);
final String brightness;
final ThemeType current;
static const String routeName = "/chooseSystemTheme";
@override
Widget build(BuildContext context) {
return Background(
child: Scaffold(
backgroundColor: Theme.of(context).extension<StackColors>()!.background,
appBar: AppBar(
leading: AppBarBackButton(
onPressed: () async {
Navigator.of(context).pop();
},
),
title: Text(
"Choose $brightness 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(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
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,
),
],
),
),
],
),
],
),
),
),
),
],
),
),
),
);
},
),
),
),
);
}
}

View file

@ -5,7 +5,7 @@ import 'package:stackwallet/pages/address_book_views/address_book_view.dart';
import 'package:stackwallet/pages/pinpad_views/lock_screen_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/about_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/currency_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/delete_account_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/language_view.dart';

View file

@ -63,7 +63,8 @@ import 'package:stackwallet/pages/send_view/token_send_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/about_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_views/debug_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/appearance_settings_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/appearance_settings/system_brightness_theme_selection_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/currency_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/delete_account_view.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/global_settings_view.dart';