猫哥学习站 ducafecat.com
登录

本文详细介绍了如何在 Flutter 中使用 flutter_native_splash 插件自定义启动画面，包括背景颜色、图像设置及 Android 12 的支持说明，帮助开发者提升应用的用户体验。

Flutter flutter_native_splash 使用指南

Flutter flutter_native_splash 使用指南

视频

前言

原文 使用 flutter_native_splash 优化 Flutter 启动画面体验

本文详细介绍了如何在 Flutter 中使用 flutter_native_splash 插件自定义启动画面，包括背景颜色、图像设置及 Android 12 的支持说明，帮助开发者提升应用的用户体验。

参考

正文

依赖包

pubspec.yaml

dev_dependencies:
  # 启动屏
  flutter_native_splash: ^2.4.1

flutter_native_splash 插件放在开发依赖，这样就不用打包到发布版本中，减少 APP 尺寸。

android 11 及以下

pubspec.yaml

flutter_native_splash:
    background_image: "assets/launcher/background.png"

生成启动屏

$ dart run flutter_native_splash:create

Building package executable...
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

对应的，你也可以删除掉。

$ dart run flutter_native_splash:remove

Building package executable...
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

如果你目标机器 android 11 这样，就会有一张图片被拉伸的情况占满屏幕。

android 11 启动屏

ios 启动图

pubspec.yaml

flutter_native_splash:
  background_image_ios: "assets/launcher/background.png"

记得 dart run flutter_native_splash:create， 每次修改都需要重新创建，之后将不再重复说。

IOS 启动图

android 12 图标启动图

android 12 之后启动方式改成图标启动，下面是文章说明。

https://pub.dev/packages/flutter_native_splash#android-12-support

https://developer.android.com/develop/ui/views/launch/splash-screen?hl=zh-cn

Android 12+ Support

pubspec.yaml

flutter_native_splash:
  color_android: "#f6eee4"
  android_12:
    image: "assets/launcher/android12.png"
    icon_background_color: "#324ea1"

分别设置了，启动视图背景、图标、图标背景。

android 12 图标启动图

同时支持 android 11 及以下, 12 以上，IOS

pubspec.yaml

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"

这样配置后的结果如下：

  • android 11 及以下满屏拉伸启动图
  • ios 满屏拉伸启动图
  • android 12 图标带图标背景启动图

手动释放启动图

这种方式不推荐，两个理由：

  • 增加发布包 app 的尺寸
  • 容易出错，如忘记 remove() 会卡在启动图。

配置清单

flutter_native_splash:
  # 这个包生成原生代码，以自定义 Flutter 的默认白色启动屏幕
  # 通过背景颜色和启动图像进行定制。
  # 自定义下面的参数，并在终端中运行以下命令：
  # dart run flutter_native_splash:create
  # 要恢复 Flutter 的默认白色启动屏幕，请在终端中运行以下命令：
  # dart run flutter_native_splash:remove

  # 重要说明：这些参数不影响 Android 12 及更高版本的配置，
  # 因为这些版本的启动屏幕处理方式与之前的 Android 版本不同。
  # Android 12 及更高版本必须在下面的 android_12 部分中进行特定配置。

  # color 或 background_image 是唯一的必需参数。使用 color 设置启动屏幕的背景
  # 为纯色。使用 background_image 设置启动屏幕的背景为 PNG 图片。
  # 这对于渐变效果很有用。图片将被拉伸到应用的大小。只能使用一个参数，
  # color 和 background_image 不能同时设置。
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # 可选参数如下。要启用某个参数，请通过删除前面的 # 字符来取消注释该行。

  # image 参数允许你指定用于启动屏幕的图片。必须是 PNG 文件，且应为 4x 像素密度调整大小。
  #image: assets/splash.png

  # branding 属性允许你指定用于启动屏幕的品牌图片。
  # 必须是 PNG 文件。支持 Android、iOS 和 Web。对于 Android 12，
  # 请参见下面的 Android 12 部分。
  #branding: assets/dart.png

  # 要将品牌图像定位在屏幕底部，可以使用 bottom、bottomRight 和 bottomLeft。
  # 如果未指定或指定其他内容，默认值为 bottom。
  #branding_mode: bottom
  
  # 设置品牌图像与屏幕底部的间距。默认值为 0。
  # branding_bottom_padding: 24

  # color_dark、background_image_dark、image_dark 和 branding_dark 是在设备处于暗模式时设置的参数。
  # 如果未指定，将使用上述参数。如果指定了 image_dark 参数，则必须指定 color_dark 或
  # background_image_dark。color_dark 和 background_image_dark 不能同时设置。
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # 从 Android 12 开始，启动屏幕的处理方式与之前的版本不同。
  # 请访问 https://developer.android.com/guide/topics/ui/splash-screen
  # 以下是 Android 12+ 的特定参数。
  android_12:
    # image 参数设置启动屏幕图标图片。如果未指定该参数，
    # 将使用应用的启动图标。
    # 请注意，启动屏幕将裁剪为屏幕中央的圆形。
    # 带图标背景的应用图标：应为 960×960 像素，并适合于直径为 640 像素的圆形。
    # 无图标背景的应用图标：应为 1152×1152 像素，并适合于直径为 768 像素的圆形。
    #image: assets/android12splash.png

    # 启动屏幕背景颜色。
    #color: "#42a5f5"

    # 应用图标背景颜色。
    #icon_background_color: "#111111"

    # branding 属性允许你指定用于启动屏幕的品牌图片。
    #branding: assets/dart.png

    # image_dark、color_dark、icon_background_color_dark 和 branding_dark 设置在设备处于暗模式时
    # 应用的值。如果未指定，将使用上述参数。
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # android、ios 和 web 参数可用于禁用在给定平台上生成启动屏幕。
  #android: false
  #ios: false
  #web: false

  # 可以使用以下参数指定平台特定的图像，这些参数将覆盖相应的参数。
  # 你可以指定所有、选定或不指定这些参数：
  #color_android: "#42a5f5"
  #color_dark_android: "#042a49"
  #color_ios: "#42a5f5"
  #color_dark_ios: "#042a49"
  #color_web: "#42a5f5"
  #color_dark_web: "#042a49"
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.gif
  #image_dark_web: assets/splash-invert-web.gif
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_bottom_padding_android: 24
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_bottom_padding_ios: 24
  #branding_dark_ios: assets/dart_dark-ios.png
  #branding_web: assets/brand-web.gif
  #branding_dark_web: assets/dart_dark-web.gif

  # 启动图像的位置可以使用 android_gravity、ios_content_mode 和
  # web_image_mode 参数进行设置。所有默认值为中心。
  #
  # android_gravity 可以是以下 Android Gravity 的其中之一（见
  # https://developer.android.com/reference/android/view/Gravity）：bottom、center、
  # center_horizontal、center_vertical、clip_horizontal、clip_vertical、end、fill、fill_horizontal、
  # fill_vertical、left、right、start 或 top。
  #android_gravity: center
  #
  # ios_content_mode 可以是以下 iOS UIView.ContentMode 的其中之一（见
  # https://developer.apple.com/documentation/uikit/uiview/contentmode）：scaleToFill、
  # scaleAspectFit、scaleAspectFill、center、top、bottom、left、right、topLeft、topRight、
  # bottomLeft 或 bottomRight。
  #ios_content_mode: center
  #
  # web_image_mode 可以是以下模式之一：center、contain、stretch 和 cover。
  #web_image_mode: center

  # 可以使用 android_screen_orientation 参数设置 Android 的屏幕方向。
  # 有效参数可以在这里找到：
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # 要隐藏通知栏，请使用 fullscreen 参数。由于 Web
  # 没有通知栏，因此该参数无效。默认值为 false。
  # 注意：与 Android 不同，iOS 在应用加载时不会自动显示通知栏。
  #       要显示通知栏，请在你的 Flutter 应用中添加以下代码：
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
  #fullscreen: true

  # 如果你更改了 info.plist 文件的名称，可以使用 info_plist_files 参数指定文件名。
  # 仅删除下面三行中的 # 字符，不要删除任何空格：
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

小结

在本文中，我们探讨了如何在 Flutter 中使用 flutter_native_splash 插件来自定义启动画面。通过设置背景颜色和图像，开发者可以提升应用的用户体验。特别是在 Android 12 及以上版本中，了解启动画面的处理方式尤为重要。希望本文能帮助你更好地掌握 flutter_native_splash 的使用，提升 Flutter 应用的启动效果。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

flutter 学习路径

© 猫哥 ducafecat.com

end