flutter：native 启动图

大前端 flutter
发布时间 :
字数:1.3k 阅读 :
  1. 什么是 Native 启动图
  2. 如何替换native 启动图
    1. 安装依赖包
    2. 配置
    3. 生成启动屏
      1. flutter_native_splash:create都做了什么
        1. Android 部分
        2. iOS 部分
    4. 启动程序
    5. 删除启动屏的相关文件
      1. 注意版本

什么是 Native 启动图

Native 启动图是操作系统（iOS / Android）在 App 启动时 显示的一张画面。它发生在应用还没完成 Flutter 引擎初始化、Dart 代码还没运行之前。

它的作用：

  1. 遮挡加载过程（防止黑屏 / 白屏）。
  2. 给用户一种「应用很快就启动」的感觉。

特点：

  • 静态的，不能写动画逻辑。
  • 只由 原生层（Android/iOS 工程） 控制，不是 Flutter widget。
  • iOS 是 强制要求的（必须有 Launch Screen）。

Flutter 在新建项目时，已经帮你生成了一个 默认的 Native 启动图：

  • Android：一个白底 + Flutter logo。
  • iOS：一个白底 + Flutter logo。

所以你启动时看到的流程是：

系统默认的 Flutter Native 启动图 (logo) 
  		→ Flutter Engine 初始化完成 
  		→ 渲染 Flutter 页面(如splash页面)

如何替换native 启动图

安装依赖包

flutter pub add flutter_native_splash -d

配置

flutter_native_splash:
  background_image_android: "assets/launcher/background.png"
  background_image_ios: "assets/launcher/background.png"
  android_12:
    image: "assets/launcher/android12.png"
    icon_background_color: "#324ea1"

  • background_image_android

    • 作用：指定 Android 启动页的背景图片（会铺满整个屏幕）。
    • 区别于 image：image 通常是居中显示的小 Logo，而 background_image_android 是整张背景图。
    • 常见用法：设计师做一张和屏幕等比例的背景图，比如渐变色或带有品牌元素的图。

  • background_image_ios

    • 作用：指定 iOS 启动页的背景图。
    • iOS 和 Android 背景图片分开写，是因为它们的启动机制不同。
    • iOS 的 LaunchScreen.storyboard 会用这张图作为背景。

  • android_12：Android 12 开始，Google 强制要求使用新的启动画面规范（SplashScreen API），插件必须单独处理。

生成启动屏

命令：dart run flutter_native_splash:create

(base) xie@xieshaolindeMacBook-Pro flutter_sophomore % dart run flutter_native_splash:create
Building package executable... (2.3s)
Built flutter_native_splash:create.
[Android] Creating default android12splash images
[Android] Creating dark mode android12splash 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] Updating ios/Runner/Info.plist for status bar hidden/visible
[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

flutter_native_splash:create都做了什么

flutter_native_splash:create 就是自动帮你生成 iOS storyboard 和 Android XML 样式文件，并修改 manifest/plist 等原生配置，让你的 Flutter 应用在启动时展示自定义的闪屏页。

插件本身不改 Dart 代码，只是修改了 Android 和 iOS 的原生配置。

Android 部分

  1. 生成背景文件 & drawable

    • 在 android/app/src/main/res/drawable/launch_background.xml 写入启动页背景（颜色 / 背景图）。
    • 如果你设置了 background_image_android，这里会引用那张图片。

  2. 生成 mipmap 图标资源（Android 12）

    • 在 android/app/src/main/res/mipmap-anydpi-v26/ 下生成 ic_launcher_foreground.xml 和 ic_launcher_background.xml。
    • 把 android_12.image 放到系统启动页中间。
    • 配合 icon_background_color 设置底色。

  3. 修改 styles.xml

    • 在 android/app/src/main/res/values/styles.xml 里创建/更新 LaunchTheme 和 NormalTheme。
    • LaunchTheme 用于启动页显示，NormalTheme 用于 App 真正运行时。

    例如：

    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

  4. 修改 AndroidManifest.xml

    • 给 MainActivity 设置主题为 @style/LaunchTheme，让 App 打开时先显示启动页。
    • 运行起来后，Flutter 框架会切换到 NormalTheme。

iOS 部分

  1. 生成 LaunchScreen.storyboard
    • 在 ios/Runner/Base.lproj/LaunchScreen.storyboard 里写入启动页 UI。
    • 如果有 background_image_ios，会自动加到 storyboard 作为背景。
    • 如果有 image，会加到 storyboard 中央。
  2. 更新 Assets.xcassets
    • 生成一份 LaunchBackground.imageset、LaunchImage.imageset，存放背景和图标。
  3. 修改 Info.plist
    • 设置 UILaunchStoryboardName 为 LaunchScreen，告诉 iOS 使用这个启动页。

启动程序

启动程序之后，可以发现图标变了：不住是原来默认的图标了。

删除启动屏的相关文件

删除命令：dart run flutter_native_splash:remove

(base) xieshaolin@xieshaolindeMacBook-Pro flutter_sophomore % dart run flutter_native_splash:remove           
Building package executable... (2.1s)
Built flutter_native_splash:remove.
Restoring Flutter's default native splash screen...
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[Android] Deleting android12splash.png
[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-night/launch_background.xml
[Android]  - android/app/src/main/res/drawable-v21/launch_background.xml
[Android]  - android/app/src/main/res/drawable-night-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] Updating ios/Runner/Info.plist for status bar hidden/visible

注意版本

flutter_native_splash最新版本2.4.6，这个版本的remove命令失效。在GitHub上面也有许多人反应这个问题：https://github.com/jonbhanson/flutter_native_splash/issues/786

目前这个版本remove是可以使用的

dev_dependencies:
  flutter_native_splash: 2.4.2 # 这里指定了版本

赏

©2017 XieShaoLin

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏