💄 Optimized settings screen

lib/screens/settings.dart

@@ -449,24 +449,33 @@ class SettingsScreen extends HookConsumerWidget {
 
       // Card background opacity settings
       ListTile(
+        isThreeLine: true,
         minLeadingWidth: 48,
         title: Text('settingsCardBackgroundOpacity').tr(),
         contentPadding: const EdgeInsets.only(left: 24, right: 17),
         leading: const Icon(Symbols.opacity),
         subtitle: Padding(
           padding: const EdgeInsets.only(top: 8),
-          child: Slider(
+          child: SliderTheme(
-            value: settings.cardTransparency,
+            data: SliderThemeData(
-            min: 0.0,
+              trackHeight: 2,
-            max: 1.0,
+              thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 8),
-            year2023: true,
+              overlayShape: const RoundSliderOverlayShape(overlayRadius: 24),
-            padding: EdgeInsets.only(right: 24),
+              trackShape: RoundedRectSliderTrackShape(),
-            label: '${(settings.cardTransparency * 100).round()}%',
+            ),
-            onChanged: (value) {
+            child: Slider(
-              ref
+              value: settings.cardTransparency,
-                  .read(appSettingsProvider.notifier)
+              min: 0.0,
-                  .setAppTransparentBackground(value);
+              max: 1.0,
-            },
+              year2023: true,
+              padding: EdgeInsets.only(right: 24),
+              label: '${(settings.cardTransparency * 100).round()}%',
+              onChanged: (value) {
+                ref
+                    .read(appSettingsProvider.notifier)
+                    .setAppTransparentBackground(value);
+              },
+            ),
           ),
         ),
       ),
@@ -512,7 +521,7 @@ class SettingsScreen extends HookConsumerWidget {
               minLeadingWidth: 48,
               title: Text('settingsBackgroundImageEnable').tr(),
               contentPadding: const EdgeInsets.only(left: 24, right: 17),
-              leading: const Icon(Symbols.image),
+              leading: const Icon(Symbols.hide_image),
               trailing: Switch(
                 value: settings.showBackgroundImage,
                 onChanged: (value) {
@@ -821,20 +830,33 @@ class SettingsScreen extends HookConsumerWidget {
               title: Text('settingsWindowOpacity').tr(),
               contentPadding: const EdgeInsets.only(left: 24, right: 17),
               leading: const Icon(Symbols.opacity),
+              isThreeLine: true,
               subtitle: Padding(
                 padding: const EdgeInsets.only(top: 8),
-                child: Slider(
+                child: SliderTheme(
-                  value: settings.windowOpacity,
+                  data: SliderThemeData(
-                  min: 0.1,
+                    trackHeight: 2,
-                  max: 1.0,
+                    thumbShape: const RoundSliderThumbShape(
-                  year2023: true,
+                      enabledThumbRadius: 8,
-                  padding: EdgeInsets.only(right: 24),
+                    ),
-                  label: '${(settings.windowOpacity * 100).round()}%',
+                    overlayShape: const RoundSliderOverlayShape(
-                  onChanged: (value) {
+                      overlayRadius: 24,
-                    ref
+                    ),
-                        .read(appSettingsProvider.notifier)
+                    trackShape: RoundedRectSliderTrackShape(),
-                        .setWindowOpacity(value);
+                  ),
-                  },
+                  child: Slider(
+                    value: settings.windowOpacity,
+                    min: 0.1,
+                    max: 1.0,
+                    year2023: true,
+                    padding: EdgeInsets.only(right: 24),
+                    label: '${(settings.windowOpacity * 100).round()}%',
+                    onChanged: (value) {
+                      ref
+                          .read(appSettingsProvider.notifier)
+                          .setWindowOpacity(value);
+                    },
+                  ),
                 ),
               ),
             ),
@@ -844,45 +866,52 @@ class SettingsScreen extends HookConsumerWidget {
     Widget buildSettingsList() {
       if (isWide) {
         // Two-column layout for wide screens
-        return Row(
+        return ConstrainedBox(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          constraints: const BoxConstraints(maxWidth: 920),
-          children: [
+          child: Row(
-            Expanded(
+            spacing: 16,
-              child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
-                crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
-                children: [
+              Expanded(
-                  _SettingsSection(
+                child: Column(
-                    title: 'settingsAppearance'.tr(),
+                  spacing: 16,
-                    children: appearanceSettings,
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                  ),
+                  children: [
-                  _SettingsSection(
-                    title: 'settingsServer'.tr(),
-                    children: serverSettings,
-                  ),
-                ],
-              ),
-            ),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  _SettingsSection(
-                    title: 'settingsBehavior'.tr(),
-                    children: behaviorSettings,
-                  ),
-                  if (desktopSettings.isNotEmpty)
                     _SettingsSection(
-                      title: 'settingsDesktop'.tr(),
+                      title: 'settingsAppearance'.tr(),
-                      children: desktopSettings,
+                      children: appearanceSettings,
                     ),
-                ],
+                    _SettingsSection(
+                      title: 'settingsServer'.tr(),
+                      children: serverSettings,
+                    ),
+                  ],
+                ),
               ),
-            ),
+              Expanded(
-          ],
+                child: Column(
-        );
+                  spacing: 16,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _SettingsSection(
+                      title: 'settingsBehavior'.tr(),
+                      children: behaviorSettings,
+                    ),
+                    if (desktopSettings.isNotEmpty)
+                      _SettingsSection(
+                        title: 'settingsDesktop'.tr(),
+                        children: desktopSettings,
+                      ),
+                  ],
+                ),
+              ),
+            ],
+          ).padding(horizontal: 16),
+        ).center();
       } else {
         // Single column layout for narrow screens
         return Column(
+          spacing: 16,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             _SettingsSection(
@@ -903,7 +932,7 @@ class SettingsScreen extends HookConsumerWidget {
                 children: desktopSettings,
               ),
           ],
-        );
+        ).padding(horizontal: 16);
       }
     }
 
@@ -940,22 +969,25 @@ class _SettingsSection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Card(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      margin: EdgeInsets.zero,
-      children: [
+      child: Column(
-        Padding(
+        crossAxisAlignment: CrossAxisAlignment.start,
-          padding: const EdgeInsets.fromLTRB(24, 16, 24, 8),
+        children: [
-          child: Text(
+          Padding(
-            title,
+            padding: const EdgeInsets.fromLTRB(24, 16, 24, 8),
-            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+            child: Text(
-              color: Theme.of(context).colorScheme.primary,
+              title,
-              fontWeight: FontWeight.bold,
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                color: Theme.of(context).colorScheme.primary,
+                fontWeight: FontWeight.bold,
+              ),
             ),
           ),
-        ),
+          ...children,
-        ...children,
+          const SizedBox(height: 16),
-        const SizedBox(height: 16),
+        ],
-      ],
+      ),
     );
   }
 }