你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
当我们必须在应用程序启动之前获得用户位置或其他数据时,我们可以在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
),
);
}
}
其他回答
在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:创建 当包完成运行时,你的启动画面就准备好了。
Flutter实际上为我们的应用程序添加启动画面提供了一种更简单的方法。 我们首先需要像设计其他应用程序屏幕一样设计一个基本页面。您需要将其设置为StatefulWidget,因为它的状态将在几秒钟内发生变化。
import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Timer(
Duration(seconds: 3),
() => Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => HomeScreen())));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Image.asset('assets/splash.png'),
),
);
}
}
逻辑 在initState()中,调用一个Timer(),如你所愿,我设置为3秒,完成后将导航器推到应用程序的主屏幕。
注意:应用程序应该只显示一次启动画面,用户不应该在返回按钮按下时再次返回。为此,我们使用Navigator.pushReplacement(),它将移动到一个新屏幕,并从导航历史堆栈中删除前一个屏幕。
要更好地了解,请访问Flutter:设计您自己的启动画面
对于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" />
添加如下所示的页面和路由可能会有所帮助
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 50.0,
child: Icon(
Icons.shopping_cart,
color: Colors.greenAccent,
size: 50.0,
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
Flutkart.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
Flutkart.store,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}
如果你想坚持到底,请参见: https://www.youtube.com/watch?v=FNBuo-7zg2Q
你有多种方法可以做到这一点,但我使用的最简单的方法是:
对于启动图标,我使用颤振库颤振启动图标
对于自定义启动画面,我创建了不同的屏幕分辨率,然后根据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"
}