Flutter 启动页实现

前言

应用开启时, 会出现短暂白屏才会出现加载后页面, 给用户的感觉也不好

原生

…

Pub 插件

安装依赖

dependencies:
  flutter:
    sdk: flutter
  ...
  flutter_native_splash: ^2.1.6

设置 pubspec.yaml

image: 图片
color: 背景颜色用于图片不能充满屏幕
android: true 生成 andorid
ios: true 生成 ios
android_gravity: “fill” // 铺满
ios_content_mode: “scaleAspectFit” // 铺满

…

flutter_native_splash:
  image: assets/images/splash.png
  color: "#ffffff"
  android: true
  ios: true
  android_gravity: "fill"
  ios_content_mode: "scaleAspectFit"

生成启动页

1	flutter pub pub run flutter_native_splash:create

[Android] Creating splash images
[Android] Creating dark mode splash images
[Android] Updating launch background(s) with splash image path...
[Android]  - android/app/src/main/res/drawable/launch_background.xml
[Android]  - android/app/src/main/res/drawable-v21/launch_background.xml
[Android] Updating styles...
[Android]  - android/app/src/main/res/values-v31/styles.xml
[Android] No android/app/src/main/res/values-v31/styles.xml found in your Android project
[Android] Creating android/app/src/main/res/values-v31/styles.xml and adding it to your Android project
[Android]  - android/app/src/main/res/values/styles.xml
[iOS] Creating images
[iOS] Creating dark mode images
[iOS] Updating LaunchScreen.storyboard with width, and height
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
Web folder not found, skipping web splash update...
╔════════════════════════════════════════════════════════════════════════════╗
║                                 WHAT IS NEW:                               ║
╠════════════════════════════════════════════════════════════════════════════╣
║ You can now keep the splash screen up while your app initializes!          ║
║ No need for a secondary splash screen anymore. Just use the remove()       ║
║ method to remove the splash screen after your initialization is complete.  ║
║ Check the docs for more info.                                              ║
╚════════════════════════════════════════════════════════════════════════════╝

✅ Native splash complete.
Now go finish building something awesome! 💪 You rock! 🤘🤩
Like the package? Please give it a 👍 here: https://pub.dev/packages/flutter_native_splash

预览

当然flutter_native_splash也提供了方法让我们主动调用关闭，我们可以初始化数据等耗时操作执行完主动关闭

void main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  // 启动页设置手动关闭
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(App());
  // 模拟初始化数据等待5s
  await Future.delayed(Duration(seconds: 3));
  // 启动页设置关闭
  FlutterNativeSplash.remove();
}