fix(color-picking): Fix color picking failure and card overflow (#998)

lib/app.dart

@@ -25,6 +25,7 @@ class _MyAppState extends State<MyApp> {
   @override
   Widget build(BuildContext context) {
     _setup(context);
+
     return ListenableBuilder(
       listenable: RNodes.app,
       builder: (context, _) {
@@ -39,6 +40,7 @@ class _MyAppState extends State<MyApp> {
 
   Widget _build(BuildContext context) {
     final colorSeed = Color(Stores.setting.colorSeed.fetch());
+
     UIs.colorSeed = colorSeed;
     UIs.primaryColor = colorSeed;
 
@@ -61,14 +63,31 @@ class _MyAppState extends State<MyApp> {
   Widget _buildDynamicColor(BuildContext context) {
     return DynamicColorBuilder(
       builder: (light, dark) {
-        final lightTheme = ThemeData(useMaterial3: true, colorScheme: light);
-        final darkTheme = ThemeData(useMaterial3: true, brightness: Brightness.dark, colorScheme: dark);
+        final lightSeed = light?.primary;
+        final darkSeed = dark?.primary;
+
+        final lightTheme = ThemeData(
+          useMaterial3: true,
+          colorSchemeSeed: lightSeed,
+          appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
+        );
+        final darkTheme = ThemeData(
+          useMaterial3: true,
+          brightness: Brightness.dark,
+          colorSchemeSeed: darkSeed,
+          appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
+        );
+
         if (context.isDark && dark != null) {
           UIs.primaryColor = dark.primary;
           UIs.colorSeed = dark.primary;
         } else if (!context.isDark && light != null) {
           UIs.primaryColor = light.primary;
           UIs.colorSeed = light.primary;
+        } else {
+          final fallbackColor = Color(Stores.setting.colorSeed.fetch());
+          UIs.primaryColor = fallbackColor;
+          UIs.colorSeed = fallbackColor;
         }
 
         return _buildApp(context, light: lightTheme, dark: darkTheme);

lib/view/page/server/tab/tab.dart

@@ -346,6 +346,6 @@ class _ServerPageState extends ConsumerState<ServerPage>
 
   static const _kCardHeightMin = 23.0;
   static const _kCardHeightFlip = 99.0;
-  static const _kCardHeightNormal = 108.0;
+  static const _kCardHeightNormal = 110.0;
   static const _kCardHeightMoveOutFuncs = 135.0;
 }

lib/view/page/setting/entries/app.dart

@@ -94,19 +94,33 @@ extension _App on _AppSettingsPageState {
       }),
       onTap: () {
         withTextFieldController((ctrl) async {
+          ctrl.text = Color(_setting.colorSeed.fetch()).toHex;
           await context.showRoundDialog(
             title: libL10n.primaryColorSeed,
             child: StatefulBuilder(
               builder: (context, setState) {
                 final children = <Widget>[
-                  /// Plugin [dynamic_color] is not supported on iOS
                   if (!isIOS)
-                    ListTile(
-                      title: Text(l10n.followSystem),
-                      trailing: StoreSwitch(
-                        prop: _setting.useSystemPrimaryColor,
-                        callback: (_) => setState(() {}),
-                      ),
+                    DynamicColorBuilder(
+                      builder: (light, dark) {
+                        final supported = light != null || dark != null;
+                        if (!supported) {
+                          if (!_setting.useSystemPrimaryColor.fetch()) {
+                            _setting.useSystemPrimaryColor.put(false);
+                            WidgetsBinding.instance.addPostFrameCallback((_) {
+                              setState(() {});
+                            });
+                          }
+                          return const SizedBox.shrink();
+                        }
+                        return ListTile(
+                          title: Text(l10n.followSystem),
+                          trailing: StoreSwitch(
+                            prop: _setting.useSystemPrimaryColor,
+                            callback: (_) => setState(() {}),
+                          ),
+                        );
+                      },
                     ),
                 ];
                 if (!_setting.useSystemPrimaryColor.fetch()) {
@@ -129,12 +143,22 @@ extension _App on _AppSettingsPageState {
 
   void _onSaveColor(String s) {
     final color = s.fromColorHex;
+
     if (color == null) {
       context.showSnackBar(libL10n.fail);
       return;
     }
-    UIs.colorSeed = color;
+
+    // Save the color seed to settings
     _setting.colorSeed.put(color.value255);
+
+    // Only update UIs colors if we're not in system mode
+    if (!_setting.useSystemPrimaryColor.fetch()) {
+      UIs.primaryColor = color;
+      UIs.colorSeed = color;
+    }
+
+    RNodes.app.notify();
     context.pop();
   }
 

lib/view/page/setting/entry.dart

@@ -1,6 +1,7 @@
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:dynamic_color/dynamic_color.dart';
 import 'package:fl_lib/fl_lib.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_highlight/theme_map.dart';
@@ -28,6 +29,7 @@ import 'package:server_box/view/page/setting/seq/srv_seq.dart';
 import 'package:server_box/view/page/setting/seq/virt_key.dart';
 
 part 'about.dart';
+part 'entries/ai.dart';
 part 'entries/app.dart';
 part 'entries/container.dart';
 part 'entries/editor.dart';
@@ -35,7 +37,6 @@ part 'entries/full_screen.dart';
 part 'entries/server.dart';
 part 'entries/sftp.dart';
 part 'entries/ssh.dart';
-part 'entries/ai.dart';
 
 const _kIconSize = 23.0;