;sparkles: Transparent app bar

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",

assets/translations/zh-CN.json

@@ -182,6 +182,8 @@
   "settingsBackgroundImageClearDescription": "将应用背景图重置为空白。",
   "settingsThemeMaterial3": "使用 Material You 设计范式",
   "settingsThemeMaterial3Description": "将应用主题设置为 Material 3 设计范式的主题。",
+  "settingsAppBarTransparent": "透明顶栏",
+  "settingsAppBarTransparentDescription": "为顶栏启用透明效果。",
   "settingsColorScheme": "主题色",
   "settingsColorSchemeDescription": "设置应用主题色。",
   "settingsColorSeed": "预设色彩主题",

assets/translations/zh-HK.json

@@ -182,6 +182,8 @@
   "settingsBackgroundImageClearDescription": "將應用背景圖重置為空白。",
   "settingsThemeMaterial3": "使用 Material You 設計範式",
   "settingsThemeMaterial3Description": "將應用主題設置為 Material 3 設計範式的主題。",
+  "settingsAppBarTransparent": "透明頂欄",
+  "settingsAppBarTransparentDescription": "為頂欄啓用透明效果。",
   "settingsColorScheme": "主題色",
   "settingsColorSchemeDescription": "設置應用主題色。",
   "settingsColorSeed": "預設色彩主題",

assets/translations/zh-TW.json

@@ -182,6 +182,8 @@
   "settingsBackgroundImageClearDescription": "將應用背景圖重置為空白。",
   "settingsThemeMaterial3": "使用 Material You 設計正規化",
   "settingsThemeMaterial3Description": "將應用主題設定為 Material 3 設計正規化的主題。",
+  "settingsAppBarTransparent": "透明頂欄",
+  "settingsAppBarTransparentDescription": "為頂欄啟用透明效果。",
   "settingsColorScheme": "主題色",
   "settingsColorSchemeDescription": "設定應用主題色。",
   "settingsColorSeed": "預設色彩主題",

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<String, FilterQuality> kImageQualityLevel = {
   'settingsImageQualityLowest': FilterQuality.none,
   'settingsImageQualityLow': FilterQuality.low,

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<HomeWidgetProvider>();
       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<HomeWidgetProvider>();
       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);

lib/screens/settings.dart

@@ -89,7 +89,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                       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<SettingsScreen> {
                           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<SettingsScreen> {
                         value ?? false,
                       );
                     });
-                    final th = context.watch<ThemeProvider>();
+                    final th = context.read<ThemeProvider>();
                     th.reloadTheme(useMaterial3: value ?? false);
                   },
                 ),
@@ -136,10 +136,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
                   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<Color?>(
                       context: context,
                       builder: (context) => AlertDialog(
@@ -170,7 +170,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
 
                     if (color == null || !context.mounted) return;
 
-                    _prefs.setInt('app_color_scheme', color.value);
+                    _prefs.setInt(kAppColorSchemeStoreKey, color.value);
                     final th = context.read<ThemeProvider>();
                     th.reloadTheme(seedColorOverride: color);
                     setState(() {});
@@ -198,15 +198,15 @@ class _SettingsScreenState extends State<SettingsScreen> {
                           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);
+                          _prefs.setInt(kAppColorSchemeStoreKey, kColorSchemes.values.elementAt(value).value);
-                          final th = context.watch<ThemeProvider>();
+                          final th = context.read<ThemeProvider>();
                           th.reloadTheme(seedColorOverride: kColorSchemes.values.elementAt(value));
                           setState(() {});
 
@@ -227,6 +227,19 @@ class _SettingsScreenState extends State<SettingsScreen> {
                     ),
                   ),
                 ),
+                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<ThemeProvider>();
+                    th.reloadTheme();
+                    setState(() {});
+                  },
+                ),
               ],
             ),
             Column(

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<ThemeData> 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<ThemeData> 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<ThemeData> createAppTheme(
     ),
     appBarTheme: AppBarTheme(
       centerTitle: true,
-      backgroundColor: hasBackground ? colorScheme.primary.withOpacity(0.75) : colorScheme.primary,
+      elevation: hasAppBarBlurry ? 0 : null,
-      foregroundColor: colorScheme.onPrimary,
+      backgroundColor: hasAppBarBlurry ? colorScheme.surfaceContainer.withAlpha(200) : colorScheme.primary,
+      foregroundColor: hasAppBarBlurry ? colorScheme.onSurface : colorScheme.onPrimary,
     ),
     scaffoldBackgroundColor: Colors.transparent,
   );