Flutter添加启动页flutter_native_splash

Java朝阳 • 2024年3月25日下午5:11 • 技术漫谈 • 阅读 365

flutter_native_splash的使用

1.flutter_native_splash

官方链接见https://pub-web.flutter-io.cn/packages/flutter_native_splash

支持Android/iOS/Web

2.pubspec.yaml添加依赖


  flutter_native_splash: ^2.4.0

  flutter_native_splash:
      color: "#42a5f5"
      image: "images/splash.png"
      # image_dark: "assets/images/splash_dark.png"
      android: true
      ios: true

3.生成启动画面

flutter pub run flutter_native_splash:create



ksnowlv@MacBook-Pro-3 base_demo % flutter pub run flutter_native_splash:create
Deprecated. Use `dart run` instead.
Building package executable... (9.4s)
Built flutter_native_splash:create.
[Android] Creating default 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]  - android/app/src/main/res/values-night-v31/styles.xml
[Android]  - android/app/src/main/res/values/styles.xml
[Android]  - android/app/src/main/res/values-night/styles.xml
[iOS] Creating  images
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
[Web] Creating images
[Web] Creating images
[Web] Creating background images
[Web] Creating CSS
[Web] Updating index.html

✅ 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

ksnowlv@MacBook-Pro-3 base_demo %

4.代码示例

main.dart


import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  XLogger.getLogger().d("main init");
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());

}