From 0a922e97b61f8510e643c016d168241354a1fe70 Mon Sep 17 00:00:00 2001 From: Christien Rioux Date: Thu, 18 Jan 2024 08:19:34 -0500 Subject: [PATCH] refactor settings page --- lib/settings/settings_page.dart | 124 +++++--------------- lib/theme/theme.dart | 1 + lib/theme/views/brightness_preferences.dart | 45 +++++++ lib/theme/views/color_preferences.dart | 55 +++++++++ lib/theme/views/views.dart | 2 + 5 files changed, 130 insertions(+), 97 deletions(-) create mode 100644 lib/theme/views/brightness_preferences.dart create mode 100644 lib/theme/views/color_preferences.dart create mode 100644 lib/theme/views/views.dart diff --git a/lib/settings/settings_page.dart b/lib/settings/settings_page.dart index 73c9ba7..b17b4a1 100644 --- a/lib/settings/settings_page.dart +++ b/lib/settings/settings_page.dart @@ -27,103 +27,33 @@ class SettingsPageState extends State { super.initState(); } - List> _getThemeDropdownItems() { - const colorPrefs = ColorPreference.values; - final colorNames = { - ColorPreference.scarlet: translate('themes.scarlet'), - ColorPreference.vapor: translate('themes.vapor'), - ColorPreference.babydoll: translate('themes.babydoll'), - ColorPreference.gold: translate('themes.gold'), - ColorPreference.garden: translate('themes.garden'), - ColorPreference.forest: translate('themes.forest'), - ColorPreference.arctic: translate('themes.arctic'), - ColorPreference.lapis: translate('themes.lapis'), - ColorPreference.eggplant: translate('themes.eggplant'), - ColorPreference.lime: translate('themes.lime'), - ColorPreference.grim: translate('themes.grim'), - ColorPreference.contrast: translate('themes.contrast') - }; - - return colorPrefs - .map((e) => DropdownMenuItem(value: e, child: Text(colorNames[e]!))) - .toList(); - } - - List> _getBrightnessDropdownItems() { - const brightnessPrefs = BrightnessPreference.values; - final brightnessNames = { - BrightnessPreference.system: translate('brightness.system'), - BrightnessPreference.light: translate('brightness.light'), - BrightnessPreference.dark: translate('brightness.dark') - }; - - return brightnessPrefs - .map( - (e) => DropdownMenuItem(value: e, child: Text(brightnessNames[e]!))) - .toList(); - } - @override - Widget build(BuildContext context) => AsyncBlocBuilder( - builder: (context, state) => ThemeSwitchingArea( - child: Scaffold( - // resizeToAvoidBottomInset: false, - appBar: DefaultAppBar( - title: Text(translate('settings_page.titlebar')), - leading: IconButton( - icon: const Icon(Icons.arrow_back), - onPressed: () => context.pop(), - ), - actions: [ - const SignalStrengthMeterWidget().paddingLTRB(16, 0, 16, 0), - ]), + Widget build(BuildContext context) => + AsyncBlocBuilder( + builder: (context, state) => ThemeSwitchingArea( + child: Scaffold( + // resizeToAvoidBottomInset: false, + appBar: DefaultAppBar( + title: Text(translate('settings_page.titlebar')), + leading: IconButton( + icon: const Icon(Icons.arrow_back), + onPressed: () => context.pop(), + ), + actions: [ + const SignalStrengthMeterWidget() + .paddingLTRB(16, 0, 16, 0), + ]), - body: FormBuilder( - key: _formKey, - child: ListView( - children: [ - ThemeSwitcher.withTheme( - builder: (_, switcher, theme) => FormBuilderDropdown( - name: formFieldTheme, - decoration: InputDecoration( - label: - Text(translate('settings_page.color_theme'))), - items: _getThemeDropdownItems(), - initialValue: state.themePreferences.colorPreference, - onChanged: (value) async { - final newPrefs = state.copyWith( - themePreferences: state.themePreferences - .copyWith( - colorPreference: - value as ColorPreference)); - switcher.changeTheme( - theme: newPrefs.themePreferences.themeData()); - await PreferencesRepository.instance.set(newPrefs); - setState(() {}); - })), - ThemeSwitcher.withTheme( - builder: (_, switcher, theme) => FormBuilderDropdown( - name: formFieldBrightness, - decoration: InputDecoration( - label: Text( - translate('settings_page.brightness_mode'))), - items: _getBrightnessDropdownItems(), - initialValue: - state.themePreferences.brightnessPreference, - onChanged: (value) async { - final newPrefs = state.copyWith( - themePreferences: state.themePreferences - .copyWith( - brightnessPreference: - value as BrightnessPreference)); - switcher.changeTheme( - theme: newPrefs.themePreferences.themeData()); - await PreferencesRepository.instance.set(newPrefs); - setState(() {}); - })), - ], - ), - ).paddingSymmetric(horizontal: 24, vertical: 8), - ))); + body: FormBuilder( + key: _formKey, + child: ListView( + children: [ + buildSettingsPageColorPreferences( + onChanged: () => setState(() {})), + buildSettingsPageBrightnessPreferences( + onChanged: () => setState(() {})), + ], + ), + ).paddingSymmetric(horizontal: 24, vertical: 8), + ))); } diff --git a/lib/theme/theme.dart b/lib/theme/theme.dart index 51b0215..3e9c176 100644 --- a/lib/theme/theme.dart +++ b/lib/theme/theme.dart @@ -1 +1,2 @@ export 'models/models.dart'; +export 'views/views.dart'; diff --git a/lib/theme/views/brightness_preferences.dart b/lib/theme/views/brightness_preferences.dart new file mode 100644 index 0000000..0c7ab10 --- /dev/null +++ b/lib/theme/views/brightness_preferences.dart @@ -0,0 +1,45 @@ +import 'package:animated_theme_switcher/animated_theme_switcher.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_form_builder/flutter_form_builder.dart'; +import 'package:flutter_translate/flutter_translate.dart'; + +import '../../settings/settings.dart'; +import '../models/models.dart'; + +const String formFieldBrightness = 'brightness'; + +List> _getBrightnessDropdownItems() { + const brightnessPrefs = BrightnessPreference.values; + final brightnessNames = { + BrightnessPreference.system: translate('brightness.system'), + BrightnessPreference.light: translate('brightness.light'), + BrightnessPreference.dark: translate('brightness.dark') + }; + + return brightnessPrefs + .map((e) => DropdownMenuItem(value: e, child: Text(brightnessNames[e]!))) + .toList(); +} + +Widget buildSettingsPageBrightnessPreferences( + {required void Function() onChanged}) { + final preferencesRepository = PreferencesRepository.instance; + final themePreferences = preferencesRepository.value.themePreferences; + return ThemeSwitcher.withTheme( + builder: (_, switcher, theme) => FormBuilderDropdown( + name: formFieldBrightness, + decoration: InputDecoration( + label: Text(translate('settings_page.brightness_mode'))), + items: _getBrightnessDropdownItems(), + initialValue: themePreferences.brightnessPreference, + onChanged: (value) async { + final newThemePrefs = themePreferences.copyWith( + brightnessPreference: value as BrightnessPreference); + final newPrefs = preferencesRepository.value + .copyWith(themePreferences: newThemePrefs); + + await preferencesRepository.set(newPrefs); + switcher.changeTheme(theme: newThemePrefs.themeData()); + onChanged(); + })); +} diff --git a/lib/theme/views/color_preferences.dart b/lib/theme/views/color_preferences.dart new file mode 100644 index 0000000..67e91f0 --- /dev/null +++ b/lib/theme/views/color_preferences.dart @@ -0,0 +1,55 @@ +import 'package:animated_theme_switcher/animated_theme_switcher.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_form_builder/flutter_form_builder.dart'; +import 'package:flutter_translate/flutter_translate.dart'; + +import '../../settings/settings.dart'; +import '../models/models.dart'; + +const String formFieldTheme = 'theme'; + +List> _getThemeDropdownItems() { + const colorPrefs = ColorPreference.values; + final colorNames = { + ColorPreference.scarlet: translate('themes.scarlet'), + ColorPreference.vapor: translate('themes.vapor'), + ColorPreference.babydoll: translate('themes.babydoll'), + ColorPreference.gold: translate('themes.gold'), + ColorPreference.garden: translate('themes.garden'), + ColorPreference.forest: translate('themes.forest'), + ColorPreference.arctic: translate('themes.arctic'), + ColorPreference.lapis: translate('themes.lapis'), + ColorPreference.eggplant: translate('themes.eggplant'), + ColorPreference.lime: translate('themes.lime'), + ColorPreference.grim: translate('themes.grim'), + ColorPreference.contrast: translate('themes.contrast') + }; + + return colorPrefs + .map((e) => DropdownMenuItem(value: e, child: Text(colorNames[e]!))) + .toList(); +} + +Widget buildSettingsPageColorPreferences({required void Function() onChanged}) { + final preferencesRepository = PreferencesRepository.instance; + final themePreferences = preferencesRepository.value.themePreferences; + return ThemeSwitcher.withTheme( + builder: (_, switcher, theme) => FormBuilderDropdown( + name: formFieldTheme, + decoration: InputDecoration( + label: Text(translate('settings_page.color_theme'))), + items: _getThemeDropdownItems(), + initialValue: themePreferences.colorPreference, + onChanged: (value) async { + final newThemePrefs = themePreferences.copyWith( + colorPreference: value as ColorPreference); + final newPrefs = preferencesRepository.value + .copyWith(themePreferences: newThemePrefs); + + await preferencesRepository.set(newPrefs); + switcher.changeTheme(theme: newThemePrefs.themeData()); + onChanged(); + + onChanged(); + })); +} diff --git a/lib/theme/views/views.dart b/lib/theme/views/views.dart new file mode 100644 index 0000000..85d06c4 --- /dev/null +++ b/lib/theme/views/views.dart @@ -0,0 +1,2 @@ +export 'brightness_preferences.dart'; +export 'color_preferences.dart';