feat(splash): 调整了 web 端启动屏样式

android/app/src/main/res/drawable-v21/launch_background.xml

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
-        <bitmap android:src="@drawable/background"/>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
     </item>
 </layer-list>

android/app/src/main/res/drawable/launch_background.xml

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
-        <bitmap android:src="@drawable/background"/>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
     </item>
 </layer-list>

ios/Runner/Base.lproj/LaunchScreen.storyboard

@@ -38,7 +38,7 @@
         </scene>
     </scenes>
     <resources>
-        <image name="LaunchImage" width="168" height="185"/>
+        <image name="LaunchImage" width="1125" height="2436"/>
         <image name="LaunchBackground" width="1" height="1"/>
     </resources>
 </document>

lib/main.dart

@@ -1,9 +1,8 @@
-import 'package:flutter/foundation.dart';
+import 'package:bistro/common/global.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
-//import 'common/access_control_filter.dart';
 import 'package:flutter_native_splash/flutter_native_splash.dart';
-// import 'package:flutter_native_splash/flutter_native_splash_web.dart';
 
 // import 'package:flutter_localizations/flutter_localizations.dart';
 import 'app.dart';
@@ -14,6 +13,10 @@ import 'router/router.dart';
 
 void main() {
   WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
+  SystemChrome.setEnabledSystemUIMode(
+    SystemUiMode.edgeToEdge,
+    overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top],
+  );
   FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
   runApp(const Bistro());
 }
@@ -28,18 +31,16 @@ class Bistro extends StatelessWidget {
       title: '小酒馆',
       theme: ThemeData(
         fontFamily: "SongTiHeavy",
-        primaryColor: const Color(0xFFff857a),
+        primaryColor: const Color(0xFFD56937),
-        // primaryColor: const Color(0xFF5f2500),
+        primaryColorDark: const Color(0xFFD56937),
-        primaryColorDark: Colors.white60,
+        scaffoldBackgroundColor: const Color(0xFF939D99),
-        appBarTheme: const AppBarTheme(color: Colors.white),
+        appBarTheme: const AppBarTheme(color: Color(0xff384444)),
-        bottomAppBarTheme: const BottomAppBarTheme(color: Color(0xFFFFF7F8)),
+        bottomAppBarTheme: const BottomAppBarTheme(
-        colorScheme: ColorScheme.fromSwatch(
+            color: Color(0xff2a2a22), surfaceTintColor: Color(0xffd56937)),
-          primarySwatch: Colors.amber,
+        colorScheme: const ColorScheme.dark(
-        )
+            primary: Color(0xFFD56937),
-            .copyWith(
+            secondary: Color(0xFFC8C2B4),
-              secondary: Colors.deepOrangeAccent,
+            background: Color(0xff384444)),
-            )
-            .copyWith(background: const Color(0xFFFFF7F8)),
       ),
       home: const BistroFrame(
         title: '小酒馆',
@@ -127,18 +128,19 @@ class BistroFrameState extends State<BistroFrame> {
     //   print('ready in 3...');
     // }
     // await Future.delayed(const Duration(seconds: 1));
-    if (kDebugMode) {
+    // if (kDebugMode) {
-      print('ready in 2...');
+    //   print('ready in 2...');
-    }
+    // }
-    await Future.delayed(const Duration(seconds: 1));
+    // await Future.delayed(const Duration(seconds: 1));
-    if (kDebugMode) {
+    // if (kDebugMode) {
-      print('ready in 1...');
+    //   print('ready in 1...');
-    }
+    // }
-    await Future.delayed(const Duration(seconds: 1));
+    // await Future.delayed(const Duration(seconds: 1));
-    if (kDebugMode) {
+    // if (kDebugMode) {
-      print('go!');
+    //   print('go!');
-    }
+    // }
-    FlutterNativeSplash.remove();
+    await Future.delayed(const Duration(seconds: 10));
+    // FlutterNativeSplash.remove();
   }
 
   @override
@@ -179,13 +181,14 @@ class BistroFrameState extends State<BistroFrame> {
 
     //设置默认未选中的状态
     double size = 14;
-    Color color = Colors.black87;
+    Color color = Theme.of(context).colorScheme.secondary;
-    bool isShow = item["display"];
-
     TextStyle style = TextStyle(
       fontSize: size,
+      color: color,
     );
 
+    bool isShow = item["display"];
+
     Widget child;
     if (!isShow) {
       child = Container();

pubspec.yaml

@@ -130,8 +130,8 @@ flutter_native_splash:
   # of your splash screen to a solid color.  Use background_image to set the background of your
   # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
   # size of the app. Only one parameter can be used, color and background_image cannot both be set.
-#  color: "#e1f5fe"
+  color: "#D59C6A"
-#  background_image: "res/assets/images/Splash.png"
+#  background_image: res/assets/images/Splash.png
 
   # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
   # the leading # character.
@@ -139,21 +139,21 @@ flutter_native_splash:
   # The image parameter allows you to specify an image used in the splash screen.  It must be a
   # png file and should be sized for 4x pixel density.
   # image: assets/logo_lockup_flutter_vertical.png
-#  image: "res/assets/images/Splash.png"
+  image: res/assets/images/Splash.png
 
   # This property allows you to specify an image used as branding in the splash screen. It must be
   # a png file. Currently, it is only supported for Android and iOS.
-  branding: assets/dart.png
+  #branding: assets/dart.png
 
   # Specify your branding image for dark mode.
-  branding_dark: assets/dart_dark.png
+  #branding_dark: assets/dart_dark.png
 
   # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
   # and bottomLeft. The default values is bottom if not specified or specified something else.
   #
   # Make sure this content mode value should not be similar to android_gravity value and
   # ios_content_mode value.
-  branding_mode: bottom
+  #branding_mode: bottom
 
   # The color_dark, background_image_dark, and image_dark are parameters that set the background
   # and image when the device is in dark mode. If they are not specified, the app will use the
@@ -186,7 +186,7 @@ flutter_native_splash:
   #ios_content_mode: center
   #
   # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
-  #web_image_mode: center
+  web_image_mode: contain
 
   # To hide the notification bar, use the fullscreen parameter.  Has no affect in web since web
   # has no notification bar.  Defaults to false.

web/index.html

@@ -33,7 +33,11 @@
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
   <link rel="stylesheet" type="text/css" href="splash/style.css">
 </head>
-<body>
+<body>  <picture id="splash">
+      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+      <img class="contain" aria-hidden="true" src="splash/img/light-1x.png" alt="">
+  </picture>        
   <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->

web/splash/style.css

@@ -5,8 +5,7 @@ html {
 body {
   margin: 0;
   min-height: 100%;
-  background-color: #ffffff;
+  background-color: #D59C6A;
-  background-image: url("img/light-background.png");
   background-size: 100% 100%;
 }