你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
你有多种方法可以做到这一点,但我使用的最简单的方法是:
对于启动图标,我使用颤振库颤振启动图标
对于自定义启动画面,我创建了不同的屏幕分辨率,然后根据Android的分辨率在mipmap文件夹中添加启动图像。
最后是调整Android中res文件夹中drawable文件夹中的launch_background.xml。
只需更改代码如下所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- <item android:drawable="@android:color/white" />
<item android:drawable="@drawable/<splashfilename>" /> --> -->
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
</item>
</layer-list>
我所见过的少数开发人员将splash添加为可绘制的,我尝试了这一点,但不知为何在Flutter 1.0.0和Dart SDK 2.0+中构建失败。因此,我更喜欢在位图部分添加飞溅。
iOS的飞溅屏幕制作相对简单。
在iOS的Runner文件夹中,只需将LaunchImage.png文件更新为自定义启动画面图像,名称与LaunchImage.png @2x, @3x, @4x相同。
只是一个补充,我觉得在LaunchImage.imageset中有一个4倍的图像很好。只需在Content中更新代码即可。Json与以下行,以下3x规模添加一个4倍规模的选项:
{
"idiom" : "universal",
"filename" : "LaunchImage@4x.png",
"scale" : "4x"
}
其他回答
对于那些像我一样严格按照步骤来做的人来说,它仍然没有发挥作用……
如果你有一个drawable-v21文件夹,请注意,因为你需要将你的代码从drawable文件夹> launch_background.xml code复制到drawable-v21文件夹> launch_background.xml
我的项目不喜欢android:src="@mipmap/launch" />
因此,我有android:src="@drawable/launch" />
dev已经给出了最好的答案,这不是一个bug,也不是一个问题,只是配置。 花点时间阅读,一切都会迎刃而解。祝大家有愉快的一天。
https://flutter.dev/docs/development/ui/advanced/splash-screen
当我们必须在应用程序启动之前获得用户位置或其他数据时,我们可以在flutter中使用自定义启动画面,这将使您的应用程序用户友好
代码如下:示例:-
import 'package:flutter/material.dart';
import 'package:bmi/HomePage.dart';
import 'dart:async';
main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return SplashScreen();
}
}
class SplashScreen extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return SplashScreenState();
}
}
class SplashScreenState extends State<SplashScreen>{
@override
void initState() {
super.initState();
when we have to get data we can show splash
Like this:-
FutureMethodForData.then((value) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
)
);
});
Or we can show splash for fix duration like this:-
Future.delayed(
Duration(
seconds: 4
),
(){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
)
);
}
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.red,
body: // add image text or whatever you want as splash
),
);
}
}
如果你想要一个次要的启动画面(在原生画面之后),这里有一个简单的例子:
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');
}
}
杰尔迪·巴特的密码对我没用。
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,
)
);
}
}
推荐文章
- Visual Studio代码- URI的目标不存在" package:flutter/material.dart "
- Flutter:升级游戏商店的版本代码
- 在一个子树中有多个英雄共享相同的标签
- 如何检查Flutter应用程序是否正在调试中运行?
- 在Flutter中向有状态小部件传递数据
- 未处理异常:ServicesBinding.defaultBinaryMessenger在绑定初始化之前被访问
- 出现键盘时,Flutter小部件将调整大小。如何预防这种情况?
- 颤振-换行文本
- 如何在Dart中四舍五入到小数点后的给定精度程度?
- 添加一个启动屏幕颤振应用程序
- 在flutter中等同于wrap_content和match_parent ?
- 多行文本字段在扑动
- 如何在颤振文本下划线
- 在Dart中命名参数和位置参数之间有什么区别?
- 如何用Dart将字符串解析为数字?