你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
最简单的方法是使用flutter_native_splash包
首先,把它添加到你的开发依赖项中:
dev_dependencies:
flutter_native_splash: ^1.3.1 # make sure to us the latest version
现在,你可以配置你的启动画面你喜欢:
flutter_native_splash:
android: true # show for android, you may set it to false
ios: true # show for IOS, you may set it to false
image: assets\logo.png # the default image for light and dark themes. Until now, images should be png images
image_dark: aassets\logo_dark.png # It will override the 'image' in the dark mode
color: "#ffffff" # the default color for light and dark themes
color_dark: "#0a0a0a" # will override the 'color' in the dark mode
android_gravity: fill # make the image fill the screen for android
ios_content_mode: scaleAspectFill # make the image fill the screen for android
这样做之后,运行:
flutter clean && flutter pub get && flutter pub run flutter_native_splash:create
你会注意到的。“\android\app\src\main\res*”已经改变,并添加了新的启动画面。
其他回答
以下是在IOS和Android平台上为Flutter应用程序配置启动画面的步骤。
IOS平台
所有提交到苹果应用商店的应用程序都必须使用Xcode故事板来提供应用程序的启动屏幕。让我们分三步来做:-
第一步:打开ios/Runner。Xcworkspace从应用程序目录的根目录。
步骤2:选择Runner/Assets。从Project Navigator中拖动所有大小的启动图像(2x, 3x等)。您还可以从https://appicon.co/#image-sets生成不同大小的图像
步骤3:你可以看到启动屏幕。故事板文件显示了所提供的图像,在这里您还可以通过简单地拖动图像来更改图像的位置。有关更多信息,请参阅官方文档https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/
Android平台
在Android中,当你的Android应用程序初始化时,会显示一个启动屏幕。让我们在3个步骤中设置这个启动屏幕:-
第一步:打开android/app/src/main/res/drawable/launch_background.xml文件。
第二步:在第4行,您可以选择所需的颜色:-
<item android:drawable="@android:color/white" />
第三步:在第10行,你可以改变图像:-
android:src="@mipmap/launch_image"
就这样,你完成了!快乐编码:)
@Collin Jackson和@Sniper都是对的。你可以按照以下步骤分别在android和iOS上设置启动映像。然后在你的MyApp()中,在你的initState()中,你可以使用Future.delayed来设置定时器或调用任何api。在Future返回响应之前,你的启动图标将会显示,然后随着响应的到来,你可以在启动画面后移动到你想要去的屏幕。您可以看到此链接:颤振启动画面
在flutter中添加启动画面的最简单的方法是imho这个包: https://pub.dev/packages/flutter_native_splash
安装指南(由软件包作者提供):
1. 设置启动画面
将您的设置添加到项目的pubspec中。Yaml文件或在根项目文件夹中创建一个名为flutter_native_splash的文件。Yaml与您的设置。
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
图像必须为PNG文件。
你也可以在颜色中使用#。颜色:“# 42 a5f5” 如果你不想为特定平台创建启动画面,你也可以将android或ios设置为false。
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
android: false
如果你的图像应该使用所有可用的屏幕(宽度和高度),你可以使用填充属性。
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
fill: true
注意:填充属性还没有在iOS启动画面中实现。
如果你想在Android上禁用全屏闪屏,你可以使用android_disable_fullscreen属性。
flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"
android_disable_fullscreen: true
2. 运行包
添加设置后,运行with的包
Flutter pub运行flutter_native_splash:创建 当包完成运行时,你的启动画面就准备好了。
目前还没有一个很好的例子,但你可以自己使用每个平台的本地工具:
iOS: https://docs.nativescript.org/tooling/publishing/creating-launch-screens-ios
Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/
订阅issue 8147以获得启动画面示例代码的更新。如果iOS上的启动画面和应用程序之间的黑色闪烁让你感到困扰,请订阅第8127期更新。
编辑:自2017年8月31日起,对启动画面的改进支持现在可以在新的项目模板中使用。看到# 11505。
如果你想要一个次要的启动画面(在原生画面之后),这里有一个简单的例子:
class SplashPage extends StatelessWidget {
SplashPage(BuildContext context) {
Future.delayed(const Duration(seconds: 3), () {
// Navigate here to next screen
});
}
@override
Widget build(BuildContext context) {
return Text('Splash screen here');
}
}