Flutter闪屏画面库flutter_native_splash
Flutter闪屏画面库flutter_native_splash
「这是我参与2022首次更文挑战的第24天,活动详情查看:2022首次更文挑战」。
本文翻译自pub: flutter_native_splash | Flutter Package (flutter-io.cn)
译时版本: flutter_native_splash 2.0.2
当应用打开时,在原生应用加载 Flutter 之前会有一个短暂的时间。默认情况下,在此期间,原生应用会显示一个白屏画面。该包自动生成 iOS 、 Android 和 Web 的原生代码来自定义闪屏画面的背景色和闪屏图像。支持黑暗模式、全屏和平台指定选项。
新内容
现在可以在应用初始化时一直显示闪屏界面!不再需要第二个闪屏界面。 只需使用 removeAfter
方法在初始化完成之后移除闪屏界面。 查看下面的详细内容。
用法
更想看视频指南?可以看下 Johannes Milke 的指南(油管)。
首先,添加 flutter_native_splash
依赖到 pubspec.yaml 文件中。
dependencies:
flutter_native_splash: ^2.0.2
别忘了 flutter pub get
。
1. 闪屏界面
自定义下面的设置,然后添加到工程的 pubspec.yaml
文件中,或者在工程文件夹下放置名为 flutter_native_splash.yaml
的新文件。
flutter_native_splash:
# 该锯生成原生代码来自定义 Flutter 默认白色原生闪屏界面的背景色和闪屏图像。
# 自定义下面的参数,然后在命令行终端运行下面的命令:
# flutter pub run flutter_native_splash:create
# 要恢复为 Flutter 默认的白色闪屏界面,运行下面的命令:
# flutter pub run flutter_native_splash:remove
# 只有 color 或 background_image 是必需的参数。使用 color 将闪屏界面的背景设置为单色。
# 使用 background_image 可将 png 图像设置为闪屏界面的背景。该图像会被拉伸以适应应用大小。
# color 和 background_image 不能同时设置,只有一个会被使用。
color: "#42a5f5"
#background_image: "assets/background.png"
# 以下是可选的参数。去掉注释前面的 #可使参数起作用。
# image 参数允许你指定在闪屏界面使用的图像。它必须是 png 文件,且应该是用于4倍像素密度的大小。
#image: assets/splash.png
# 该属性允许你指定图像作为商标在闪屏界面显示。它必须是 png 文件。现在它只支持 Android 和 iOS 。
#branding: assets/dart.png
# 为黑暗模式指定商标图像
#branding_dark: assets/dart_dark.png
# 要将商标图像放置在界面底部,可以使用 bottom 、 bottomRight 和 bottomLeft 。如果未指定或者指定了其它值,使用默认值 bottom 。
# 确保该内容模式值与 android_gravity 值 和 ios_content_mode 值不相似。
#branding_mode: bottom
# color_dark 、 background_image_dark 和 image_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
# android 、 ios 和 web 参数可用于不为对应的平台生成闪屏界面。
#android: false
#ios: false
#web: false
# 可用 android_gravity 、 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
# 要隐藏通知栏,使用 fullscreen 参数 。在 Web 上不起作为,因为 Web 没有通知栏。默认是 false 。
# 注意: 不像 Android 、 iOS 当应用加载时不会自动显示通知栏。
# 要显示通知栏,在 Flutter 应用中添加以下代码:
# WidgetsFlutterBinding.ensureInitialized();
# SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
#fullscreen: true
# 如果改变了 info.plist 的名字,可以使用 info_plist_files 指定对应的文件名。
# 只需移除下面三行前面的 # 字符,不要移除任何空格:
#info_plist_files:
# - 'ios/Runner/Info-Debug.plist'
# - 'ios/Runner/Info-Release.plist'
2. 运行此包
添加设置之后,在命令行终端运行以下命令:
flutter pub run flutter_native_splash:create
当包完成运行后,你的闪屏界面就准备好了。
要指定 YAML 文件的位置,只需在终端命令后添加 --path:
flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml
3. 准备应用初始化(可选)
默认,闪屏界面在首次绘制 Flutter 时会被移除。如果想要在应用初始化时保持闪屏界面,可以如下使用 removeAfter
方法:
import 'package:flutter_native_splash/flutter_native_splash.dart';
void main() {
FlutterNativeSplash.removeAfter(initialization);
// runApp 会运行,但是在初始化完成前不会显示:
runApp(const MyApp());
}
void initialization(BuildContext context) async {
// 这里可以在闪屏界面显示时初始化应用所需的资源。
// 该函数完成后,闪屏界面会被移除。
}
注意: 为了使用此方法, flutter_native_splash
必须在 pubspec.yaml
的 dependencies
部分里,而不是在 dev_dependencies
里。之前的版本是在推后者里。
4. 支持此包 (可选)
如果你觉得该包有用,可以在本页(原链接)最上面点个赞。 这里还有支持该包的另外一个选项:
支持Android 12
Android 12 有一个添加闪屏界面的 新方法,它由一个 窗口背景、图标和图标背景构成。现在,该包支持设置背景色和应用启动用的图标。
如果使支持 Android 12 可用,该包会在 values-v31
和 values-night-v31
资源文件夹下添加一个 styles.xml
文件,当需要为以前的 Android 版本维护旧的闪屏界面时,它会提供 Android 12 的支持。
注意: 从 Android Studio 启动应用时,闪屏界面可能不会出现。尽管如此,从 Android 上点击加载图标启动应用时它会出现。
常见问题
遇到这样的错误 "A splash screen was provided to Flutter, but this is deprecated."
该信息和此包没有关系,它和 Flutter 2.5 如何处理闪屏界面的一个改动 change 有关。这是由下面列出的 AndroidManifest.xml
中的代码导致,这在之前版本的 Flutter 中是默认包含的:
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
解决方案是移除上面的代码。注意这也会移除闪屏界面和应用界面之间的渐变效果。
是否支持 动画/lottie/GIF图像
现在还不支持。欢迎 PR 。
遇到了这样的错误 AAPT: error: style attribute 'android:attr/windowSplashScreenBackground' not found
该属性只在 Android 12 能找到,所以如果遇到了这个错误,这意味着你的工程没有完全为 Android 12 设置好。你已经更新应用的编译配置 了吗?
在 iOS 上看到了错误的闪屏界面。
这是由 iOS 闪屏缓存 bug 导致的,可以卸载应用、关机重启,然后尝试重新安装来解决。
在闪屏界面和应用界面之间看到了白色界面
-
可能是由 iOS 闪屏缓存 bug 导致的,可以通过卸载应用、关机重启,然后重新安装来解决。
-
可能是由应用初始化的延迟导致的。要解决这个问题,可以将所有的初始化代码放在
removeAfter
方法中。
注意事项
- 如果在 iOS 上闪屏界面没有正确更新,或者在闪屏界面前有白屏界面,运行
flutter clean
然后重新编译应用。如果这样问题还未解决,删除应用、关机、重启设备、安装然后加载应用,如 this StackOverflow thread 所述。 - 该包在 Android 上更改了
launch_background.xml
和styles.xml
文件, 在 iOS 上更改了LaunchScreen.storyboard
和Info.plist
,在 Web 上更改了index.html
。 如果你手动更改了这些文件,该插件可能不能正常工作。如果发现任何 bug ,还请 提出 issue 。
如何运转
Android
- 闪屏图像会被调整为
mdpi
、hdpi
、xhdpi
、xxhdpi
和xxxhdpi
的 drawable 。 - 用于闪屏图像 drawable ,包含
<bitmap>
的<item>
标签会被添加到launch_background.xml
中。 - 背景色会添加到
colors.xml
中,在launch_background.xml
中被引用。 - 切换全屏的代码会被添加到
styles.xml
中。 - 黑暗模式的变量会被放置到
drawable-night
和values-night
等资源文件夹中。
iOS
- 闪屏图像会被调整为
@3x
和@2x
的图像。 - color 和 image 属性会被插入到
LaunchScreen.storyboard
。 - 背景色使用单像素 png 文件拉伸到屏幕大小实现。
- 切换隐藏状态栏的代码会被添加到
Info.plist
。
Web
web/splash
文件夹会被创建用于放置闪屏界面的图像和 CSS 文件。- 闪屏图像会被调整为
1x
、2x
、3x
和4x
大小然后会放置到web/splash/img
中。 - 闪屏样式表会被添加到应用的
web/index.html
文件中,和用作闪屏图片的 HTML 。
感谢
该包最初是由 Henrique Arthur 创建的,现在由 Jon Hanson 维护。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!