Flutter flutter_native_splash 使用指南
视频
前言
本文详细介绍了如何在 Flutter 中使用 flutter_native_splash 插件自定义启动画面,包括背景颜色、图像设置及 Android 12 的支持说明,帮助开发者提升应用的用户体验。
参考
- https://pub.dev/packages/flutter_native_splash
- https://pub.dev/packages/flutter_native_splash#android-12-support
- https://developer.android.com/about/versions/12/features/splash-screen
正文
依赖包
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 这样,就会有一张图片被拉伸的情况占满屏幕。
ios 启动图
pubspec.yaml
flutter_native_splash:
background_image_ios: "assets/launcher/background.png"
记得
dart run flutter_native_splash:create
, 每次修改都需要重新创建,之后将不再重复说。
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
pubspec.yaml
flutter_native_splash:
color_android: "#f6eee4"
android_12:
image: "assets/launcher/android12.png"
icon_background_color: "#324ea1"
分别设置了,启动视图背景、图标、图标背景。
同时支持 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 学习路径
- Flutter 优秀插件推荐
- Flutter 基础篇1 - Dart 语言学习
- Flutter 基础篇2 - 快速上手
- Flutter 实战1 - Getx Woo 电商APP
- Flutter 实战2 - 上架指南 Apple Store、Google Play
- Flutter 基础篇3 - 仿微信朋友圈
- Flutter 实战3 - 腾讯即时通讯 第一篇
- Flutter 实战4 - 腾讯即时通讯 第二篇
© 猫哥 ducafecat.com
end