optimization: desktop UI (#747)

lib/app.dart

@@ -2,12 +2,13 @@ import 'package:dynamic_color/dynamic_color.dart';
 import 'package:fl_lib/fl_lib.dart';
 import 'package:fl_lib/generated/l10n/lib_l10n.dart';
 import 'package:flutter/material.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 
 import 'package:server_box/core/extension/context/locale.dart';
 import 'package:server_box/data/res/build_data.dart';
 import 'package:server_box/data/res/store.dart';
 import 'package:server_box/generated/l10n/l10n.dart';
-import 'package:server_box/view/page/home/home.dart';
+import 'package:server_box/view/page/home.dart';
 import 'package:icons_plus/icons_plus.dart';
 
 part 'intro.dart';
@@ -22,47 +23,67 @@ class MyApp extends StatelessWidget {
       listenable: RNodes.app,
       builder: (context, _) {
         if (!Stores.setting.useSystemPrimaryColor.fetch()) {
-          final colorSeed = Color(Stores.setting.colorSeed.fetch());
-          UIs.colorSeed = colorSeed;
-          UIs.primaryColor = colorSeed;
-          return _buildApp(
-            context,
-            light: ThemeData(
-              useMaterial3: true,
-              colorSchemeSeed: UIs.colorSeed,
-            ),
-            dark: ThemeData(
-              useMaterial3: true,
-              brightness: Brightness.dark,
-              colorSchemeSeed: UIs.colorSeed,
-            ),
-          );
+          return _build(context);
         }
-        return DynamicColorBuilder(
-          builder: (light, dark) {
-            final lightTheme = ThemeData(
-              useMaterial3: true,
-              colorScheme: light,
-            );
-            final darkTheme = ThemeData(
-              useMaterial3: true,
-              brightness: Brightness.dark,
-              colorScheme: dark,
-            );
-            if (context.isDark && dark != null) {
-              UIs.primaryColor = dark.primary;
-            } else if (!context.isDark && light != null) {
-              UIs.primaryColor = light.primary;
-            }
-            return _buildApp(context, light: lightTheme, dark: darkTheme);
-          },
-        );
+
+        return _buildDynamicColor(context);
       },
     );
   }
 
-  Widget _buildApp(BuildContext ctx,
-      {required ThemeData light, required ThemeData dark}) {
+  Widget _build(BuildContext context) {
+    final colorSeed = Color(Stores.setting.colorSeed.fetch());
+    UIs.colorSeed = colorSeed;
+    UIs.primaryColor = colorSeed;
+
+    return _buildApp(
+      context,
+      light: ThemeData(
+        useMaterial3: true,
+        colorSchemeSeed: UIs.colorSeed,
+        appBarTheme: AppBarTheme(
+          scrolledUnderElevation: 0.0,
+        ),
+      ),
+      dark: ThemeData(
+        useMaterial3: true,
+        brightness: Brightness.dark,
+        colorSchemeSeed: UIs.colorSeed,
+        appBarTheme: AppBarTheme(
+          scrolledUnderElevation: 0.0,
+        ),
+      ),
+    );
+  }
+
+  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,
+        );
+        if (context.isDark && dark != null) {
+          UIs.primaryColor = dark.primary;
+        } else if (!context.isDark && light != null) {
+          UIs.primaryColor = light.primary;
+        }
+
+        return _buildApp(context, light: lightTheme, dark: darkTheme);
+      },
+    );
+  }
+
+  Widget _buildApp(
+    BuildContext ctx, {
+    required ThemeData light,
+    required ThemeData dark,
+  }) {
     final tMode = Stores.setting.themeMode.fetch();
     // Issue #57
     final themeMode = switch (tMode) {
@@ -74,6 +95,14 @@ class MyApp extends StatelessWidget {
 
     return MaterialApp(
       key: ValueKey(locale),
+      builder: (context, child) => ResponsiveBreakpoints.builder(
+        child: child ?? UIs.placeholder,
+        breakpoints: const [
+          Breakpoint(start: 0, end: 450, name: MOBILE),
+          Breakpoint(start: 451, end: 800, name: TABLET),
+          Breakpoint(start: 801, end: 1920, name: DESKTOP),
+        ],
+      ),
       locale: locale,
       localizationsDelegates: const [
         LibLocalizations.delegate,
@@ -86,21 +115,25 @@ class MyApp extends StatelessWidget {
       themeMode: themeMode,
       theme: light.fixWindowsFont,
       darkTheme: (tMode < 3 ? dark : dark.toAmoled).fixWindowsFont,
-      home: VirtualWindowFrame(
-        child: Builder(
-          builder: (context) {
-            context.setLibL10n();
-            final appL10n = AppLocalizations.of(context);
-            if (appL10n != null) l10n = appL10n;
+      home: Builder(
+        builder: (context) {
+          context.setLibL10n();
+          final appL10n = AppLocalizations.of(context);
+          if (appL10n != null) l10n = appL10n;
 
-            final intros = _IntroPage.builders;
-            if (intros.isNotEmpty) {
-              return _IntroPage(intros);
-            }
+          Widget child;
+          final intros = _IntroPage.builders;
+          if (intros.isNotEmpty) {
+            child = _IntroPage(intros);
+          }
 
-            return const HomePage();
-          },
-        ),
+          child = const HomePage();
+
+          return VirtualWindowFrame(
+            title: BuildData.name,
+            child: child,
+          );
+        },
       ),
     );
   }