你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
杰尔迪·巴特的密码对我没用。
Flutter抛出“请求的导航器操作具有不包括导航器的上下文”。
正如本文中提到的,我修复了将Navigator使用者组件包装在另一个使用路由初始化Navigator上下文的组件中的代码。
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';
class SplashView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Builder(
builder: (context) => new _SplashContent(),
),
routes: <String, WidgetBuilder>{
'/main': (BuildContext context) => new MainView()}
);
}
}
class _SplashContent extends StatefulWidget{
@override
_SplashContentState createState() => new _SplashContentState();
}
class _SplashContentState extends State<_SplashContent>
with SingleTickerProviderStateMixin {
var _iconAnimationController;
var _iconAnimation;
startTimeout() async {
var duration = const Duration(seconds: 3);
return new Timer(duration, handleTimeout);
}
void handleTimeout() {
Navigator.pushReplacementNamed(context, "/main");
}
@override
void initState() {
super.initState();
_iconAnimationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 2000));
_iconAnimation = new CurvedAnimation(
parent: _iconAnimationController, curve: Curves.easeIn);
_iconAnimation.addListener(() => this.setState(() {}));
_iconAnimationController.forward();
startTimeout();
}
@override
Widget build(BuildContext context) {
return new Center(
child: new Image(
image: new AssetImage("images/logo.png"),
width: _iconAnimation.value * 100,
height: _iconAnimation.value * 100,
)
);
}
}
其他回答
@Collin Jackson和@Sniper都是对的。你可以按照以下步骤分别在android和iOS上设置启动映像。然后在你的MyApp()中,在你的initState()中,你可以使用Future.delayed来设置定时器或调用任何api。在Future返回响应之前,你的启动图标将会显示,然后随着响应的到来,你可以在启动画面后移动到你想要去的屏幕。您可以看到此链接:颤振启动画面
有两种方法
转到本机包和初始页面。就像在原生Android包中创建一个drawable 创建一个省道屏幕来显示一段时间
我在这里找到了关于移除白屏和显示启动画面的完整解释
我想在颤振的实际方式做一个启动屏幕更多的光。
我在这里跟踪了一点,我看到事情看起来不是那么糟糕的启动画面在扑动。
也许大多数开发者(比如我)都认为在Flutter中并没有一个默认的启动画面,他们需要做些什么。有一个启动画面,但它是白色背景的,没有人能理解iOS和Android默认已经有一个启动画面。
开发者需要做的唯一一件事就是将Branding图像放在正确的位置,然后启动画面就会开始工作了。
下面是你如何一步一步做到的方法:
首先是Android(因为这是我最喜欢的平台:))
在Flutter项目中找到“android”文件夹。 浏览到app -> src -> main -> res文件夹,并将品牌形象的所有变体放在相应的文件夹中。例如:
密度为1的图像需要放在mimmap -mdpi中, 密度为1.5的图像需要放在mimmap -hdpi中, 密度为2的图像需要放在mimmap -xhdpi中, 密度为3的图像需要放在mimmap -xxhdpi中, 密度为4的图像需要放在mimmap -xxxhdpi中,
默认情况下,在android文件夹中没有drawable-mdpi, drawable-hdpi等,但如果我们想要,我们可以创建它们。因此,需要将图像放在mipmap文件夹中。此外,关于启动画面的默认XML代码(在Android中)将使用@mipmap,而不是@drawable资源(如果你想改变它)。
The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like: <!--<item android:drawable="@android:color/white" />--> <item> <bitmap android:gravity="center" android:src="@mipmap/your_image_name" /> </item>
请注意,我们注释了白色背景的XML代码,并取消了关于mipmap图像的代码注释。如果有人感兴趣,可以在styles.xml文件中使用launch_background.xml文件。
其次是iOS平台:
在Flutter项目中找到“ios”文件夹。 浏览到Runner -> Assets。xcassets -> LaunchImage.imageset。应该有LaunchImage.png, LaunchImage@2x.png等。现在你必须用你的品牌形象变体替换这些形象。例如:
密度为1的图像需要覆盖LaunchImage.png, 密度为2的图像需要覆盖LaunchImage@2x.png, 密度为3的图像需要覆盖LaunchImage@3x.png, 密度为4的图像需要覆盖LaunchImage@4x.png,
如果我没有错,LaunchImage@4x.png默认不存在,但你可以很容易地创建一个。如果LaunchImage@4x.png不存在,你必须在Contents中声明它。Json文件,它是在同一目录下的图像。更改我的内容后。Json文件是这样的:
{
"images" : [
{
"idiom" : "universal",
"filename" : "LaunchImage.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@3x.png",
"scale" : "3x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@4x.png",
"scale" : "4x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
这就是你所需要的,下次当你在Android或iOS上运行你的应用时,你应该有正确的启动画面和你添加的品牌形象。
谢谢
对于Android,转到这个路径,
Android > app > SRC > main > res > drawable > launcher_background.xml
默认代码为白色背景屏幕。 像这样,
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item>
您可以通过添加图标或任何自定义设计来更改它的颜色或修改它。更多的定制细节签出这为android。
为Ios
在Xcode中打开Ios项目。
选择Runner,然后。内部Runner文件夹Main。故事板文件在那里, 在这里输入图像描述
默认情况下,它的颜色是白色,你可以根据自己的要求自定义或改变颜色,更多的自定义检查这个Ios。
对于Android,进入Android > app > src > main > res > drawable > launcher_background.xml
现在取消注释,用你的图像位置替换@mipmap/launch_image。
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item>
你可以在这里改变屏幕的颜色
<item android:drawable="@android:color/white" />
推荐文章
- 错误地使用父数据小部件。扩展小部件必须放置在flex小部件中
- 颤振给容器圆形边界
- Flutter: RenderBox没有布局
- 颤振插件未安装错误;当运行'扑动医生'时
- 如何改变appBar返回按钮的颜色
- 如何在扑动中设置按钮的宽度和高度?
- 我如何“休眠”Dart程序
- Android启动画面图像大小适合所有设备
- 在Flutter app上检查是否有网络连接
- 如何禁用或覆盖Android的“返回”按钮,在扑动?
- 如何在扑动中垂直和水平居中文本?
- Flutter and google_sign_in plugin: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10:, null)
- 如何在扑动中格式化日期时间
- 在Flutter中Column的子元素之间的空间
- Visual Studio代码- URI的目标不存在" package:flutter/material.dart "