From 77e9994204b76ff34265ae3809befbedfda7e86c Mon Sep 17 00:00:00 2001 From: LittleSheep Date: Sun, 22 Dec 2024 13:31:09 +0800 Subject: [PATCH] ;sparkles: Transparent app bar --- assets/translations/en-US.json | 2 ++ assets/translations/zh-CN.json | 2 ++ assets/translations/zh-HK.json | 2 ++ assets/translations/zh-TW.json | 2 ++ lib/providers/config.dart | 4 ++++ lib/screens/home.dart | 7 +++---- lib/screens/settings.dart | 33 +++++++++++++++++++++++---------- lib/theme.dart | 11 +++++++---- 8 files changed, 45 insertions(+), 18 deletions(-) diff --git a/assets/translations/en-US.json b/assets/translations/en-US.json index 4ad9bb9..bbc9b8f 100644 --- a/assets/translations/en-US.json +++ b/assets/translations/en-US.json @@ -178,6 +178,8 @@ "other": "{} comments" }, "settingsAppearance": "Appearance", + "settingsAppBarTransparent": "Transparent App Bar", + "settingsAppBarTransparentDescription": "Enable transparent effect for the app bar.", "settingsBackgroundImage": "Background Image", "settingsBackgroundImageDescription": "Set the background image that will be applied globally.", "settingsBackgroundImageClear": "Clear Existing Background Image", diff --git a/assets/translations/zh-CN.json b/assets/translations/zh-CN.json index 8e874ce..010a260 100644 --- a/assets/translations/zh-CN.json +++ b/assets/translations/zh-CN.json @@ -182,6 +182,8 @@ "settingsBackgroundImageClearDescription": "将应用背景图重置为空白。", "settingsThemeMaterial3": "使用 Material You 设计范式", "settingsThemeMaterial3Description": "将应用主题设置为 Material 3 设计范式的主题。", + "settingsAppBarTransparent": "透明顶栏", + "settingsAppBarTransparentDescription": "为顶栏启用透明效果。", "settingsColorScheme": "主题色", "settingsColorSchemeDescription": "设置应用主题色。", "settingsColorSeed": "预设色彩主题", diff --git a/assets/translations/zh-HK.json b/assets/translations/zh-HK.json index cfc8944..d6e006e 100644 --- a/assets/translations/zh-HK.json +++ b/assets/translations/zh-HK.json @@ -182,6 +182,8 @@ "settingsBackgroundImageClearDescription": "將應用背景圖重置為空白。", "settingsThemeMaterial3": "使用 Material You 設計範式", "settingsThemeMaterial3Description": "將應用主題設置為 Material 3 設計範式的主題。", + "settingsAppBarTransparent": "透明頂欄", + "settingsAppBarTransparentDescription": "為頂欄啓用透明效果。", "settingsColorScheme": "主題色", "settingsColorSchemeDescription": "設置應用主題色。", "settingsColorSeed": "預設色彩主題", diff --git a/assets/translations/zh-TW.json b/assets/translations/zh-TW.json index 1e296d4..25588eb 100644 --- a/assets/translations/zh-TW.json +++ b/assets/translations/zh-TW.json @@ -182,6 +182,8 @@ "settingsBackgroundImageClearDescription": "將應用背景圖重置為空白。", "settingsThemeMaterial3": "使用 Material You 設計正規化", "settingsThemeMaterial3Description": "將應用主題設定為 Material 3 設計正規化的主題。", + "settingsAppBarTransparent": "透明頂欄", + "settingsAppBarTransparentDescription": "為頂欄啟用透明效果。", "settingsColorScheme": "主題色", "settingsColorSchemeDescription": "設定應用主題色。", "settingsColorSeed": "預設色彩主題", diff --git a/lib/providers/config.dart b/lib/providers/config.dart index b7f70da..78fafc0 100644 --- a/lib/providers/config.dart +++ b/lib/providers/config.dart @@ -9,6 +9,10 @@ const kRtkStoreKey = 'nex_user_rtk'; const kNetworkServerDefault = 'https://api.sn.solsynth.dev'; const kNetworkServerStoreKey = 'app_server_url'; +const kAppbarTransparentStoreKey = 'app_bar_transparent'; +const kAppBackgroundStoreKey = 'app_has_background'; +const kAppColorSchemeStoreKey = 'app_color_scheme'; + const Map kImageQualityLevel = { 'settingsImageQualityLowest': FilterQuality.none, 'settingsImageQualityLow': FilterQuality.low, diff --git a/lib/screens/home.dart b/lib/screens/home.dart index efea0e4..0bdfab6 100644 --- a/lib/screens/home.dart +++ b/lib/screens/home.dart @@ -17,14 +17,13 @@ import 'package:surface/providers/config.dart'; import 'package:surface/providers/post.dart'; import 'package:surface/providers/sn_network.dart'; import 'package:surface/providers/userinfo.dart'; +import 'package:surface/providers/widget.dart'; import 'package:surface/types/check_in.dart'; import 'package:surface/types/post.dart'; import 'package:surface/widgets/app_bar_leading.dart'; import 'package:surface/widgets/dialog.dart'; import 'package:surface/widgets/post/post_item.dart'; -import '../providers/widget.dart'; - class HomeScreenDashEntry { final String name; final Widget child; @@ -212,7 +211,7 @@ class _HomeDashCheckInWidgetState extends State<_HomeDashCheckInWidget> { final home = context.read(); final resp = await sn.client.get('/cgi/id/check-in/today'); _todayRecord = SnCheckInRecord.fromJson(resp.data); - home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson()); + await home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson()); } finally { setState(() => _isBusy = false); } @@ -225,7 +224,7 @@ class _HomeDashCheckInWidgetState extends State<_HomeDashCheckInWidget> { final home = context.read(); final resp = await sn.client.post('/cgi/id/check-in'); _todayRecord = SnCheckInRecord.fromJson(resp.data); - home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson()); + await home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson()); } catch (err) { if (!mounted) return; context.showErrorDialog(err); diff --git a/lib/screens/settings.dart b/lib/screens/settings.dart index 272b3a3..0bd7dc1 100644 --- a/lib/screens/settings.dart +++ b/lib/screens/settings.dart @@ -89,7 +89,7 @@ class _SettingsScreenState extends State { if (image == null) return; await File(image.path).copy('$_docBasepath/app_background_image'); - _prefs.setBool('app_has_background', true); + _prefs.setBool(kAppBackgroundStoreKey, true); setState(() {}); }, @@ -110,7 +110,7 @@ class _SettingsScreenState extends State { trailing: const Icon(Symbols.chevron_right), onTap: () { File('$_docBasepath/app_background_image').deleteSync(); - _prefs.remove('app_has_background'); + _prefs.remove(kAppBackgroundStoreKey); setState(() {}); }, ); @@ -128,7 +128,7 @@ class _SettingsScreenState extends State { value ?? false, ); }); - final th = context.watch(); + final th = context.read(); th.reloadTheme(useMaterial3: value ?? false); }, ), @@ -136,10 +136,10 @@ class _SettingsScreenState extends State { leading: const Icon(Symbols.format_paint), title: Text('settingsColorScheme').tr(), subtitle: Text('settingsColorSchemeDescription').tr(), - contentPadding: const EdgeInsets.only(left: 24, right: 17), + contentPadding: const EdgeInsets.symmetric(horizontal: 24), trailing: const Icon(Symbols.chevron_right), onTap: () async { - Color pickerColor = Color(_prefs.getInt('app_color_scheme') ?? Colors.indigo.value); + Color pickerColor = Color(_prefs.getInt(kAppColorSchemeStoreKey) ?? Colors.indigo.value); final color = await showDialog( context: context, builder: (context) => AlertDialog( @@ -170,7 +170,7 @@ class _SettingsScreenState extends State { if (color == null || !context.mounted) return; - _prefs.setInt('app_color_scheme', color.value); + _prefs.setInt(kAppColorSchemeStoreKey, color.value); final th = context.read(); th.reloadTheme(seedColorOverride: color); setState(() {}); @@ -198,15 +198,15 @@ class _SettingsScreenState extends State { child: Text('custom').tr(), ), ], - value: _prefs.getInt('app_color_scheme') == null + value: _prefs.getInt(kAppColorSchemeStoreKey) == null ? 1 : kColorSchemes.values .toList() - .indexWhere((ele) => ele.value == _prefs.getInt('app_color_scheme')), + .indexWhere((ele) => ele.value == _prefs.getInt(kAppColorSchemeStoreKey)), onChanged: (int? value) { if (value != null && value != -1) { - _prefs.setInt('app_color_scheme', kColorSchemes.values.elementAt(value).value); - final th = context.watch(); + _prefs.setInt(kAppColorSchemeStoreKey, kColorSchemes.values.elementAt(value).value); + final th = context.read(); th.reloadTheme(seedColorOverride: kColorSchemes.values.elementAt(value)); setState(() {}); @@ -227,6 +227,19 @@ class _SettingsScreenState extends State { ), ), ), + CheckboxListTile( + secondary: const Icon(Symbols.blur_on), + title: Text('settingsAppBarTransparent').tr(), + subtitle: Text('settingsAppBarTransparentDescription').tr(), + contentPadding: const EdgeInsets.only(left: 24, right: 17), + value: _prefs.getBool(kAppbarTransparentStoreKey) ?? false, + onChanged: (value) { + _prefs.setBool(kAppbarTransparentStoreKey, value ?? false); + final th = context.read(); + th.reloadTheme(); + setState(() {}); + }, + ), ], ), Column( diff --git a/lib/theme.dart b/lib/theme.dart index 73561bc..0559822 100644 --- a/lib/theme.dart +++ b/lib/theme.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; +import 'package:surface/providers/config.dart'; const kMaterialYouToggleStoreKey = 'app_theme_material_you'; @@ -24,7 +25,7 @@ Future createAppTheme( }) async { final prefs = await SharedPreferences.getInstance(); - final seedColorString = prefs.getInt('app_color_scheme'); + final seedColorString = prefs.getInt(kAppColorSchemeStoreKey); final seedColor = seedColorString != null ? Color(seedColorString) : Colors.indigo; final colorScheme = ColorScheme.fromSeed( @@ -32,7 +33,8 @@ Future createAppTheme( brightness: brightness, ); - final hasBackground = prefs.getBool('app_has_background') ?? false; + final hasBackground = prefs.getBool(kAppBackgroundStoreKey) ?? false; + final hasAppBarBlurry = prefs.getBool(kAppbarTransparentStoreKey) ?? false; return ThemeData( useMaterial3: useMaterial3 ?? (prefs.getBool(kMaterialYouToggleStoreKey) ?? false), @@ -46,8 +48,9 @@ Future createAppTheme( ), appBarTheme: AppBarTheme( centerTitle: true, - backgroundColor: hasBackground ? colorScheme.primary.withOpacity(0.75) : colorScheme.primary, - foregroundColor: colorScheme.onPrimary, + elevation: hasAppBarBlurry ? 0 : null, + backgroundColor: hasAppBarBlurry ? colorScheme.surfaceContainer.withAlpha(200) : colorScheme.primary, + foregroundColor: hasAppBarBlurry ? colorScheme.onSurface : colorScheme.onPrimary, ), scaffoldBackgroundColor: Colors.transparent, );