flutter_native_splash的使用

1.flutter_native_splash

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

支持Android/iOS/Web

2.pubspec.yaml添加依赖

1
2
3
4
5
6
7
8
  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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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
1
2
3
4
5
6
7
8
9
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());

}

5.XCode中设置启动屏

在flutter工程中的iOS目录下,打开Runner.xcworkspace,设置启动屏,如图所示

image

6.效果

image