你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
@Collin Jackson和@Sniper都是对的。你可以按照以下步骤分别在android和iOS上设置启动映像。然后在你的MyApp()中,在你的initState()中,你可以使用Future.delayed来设置定时器或调用任何api。在Future返回响应之前,你的启动图标将会显示,然后随着响应的到来,你可以在启动画面后移动到你想要去的屏幕。您可以看到此链接:颤振启动画面
其他回答
当我们必须在应用程序启动之前获得用户位置或其他数据时,我们可以在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
),
);
}
}
你应该试试下面的代码,为我工作
import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
void handleTimeout() {
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => new MyHomePage()));
}
startTimeout() async {
var duration = const Duration(seconds: 3);
return new Timer(duration, handleTimeout);
}
@override
void initState() {
// TODO: implement 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 Scaffold(
body: new Scaffold(
body: new Center(
child: new Image(
image: new AssetImage("images/logo.png"),
width: _iconAnimation.value * 100,
height: _iconAnimation.value * 100,
)),
),
);
}
}
对于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" />
对于那些像我一样严格按照步骤来做的人来说,它仍然没有发挥作用……
如果你有一个drawable-v21文件夹,请注意,因为你需要将你的代码从drawable文件夹> launch_background.xml code复制到drawable-v21文件夹> launch_background.xml
我的项目不喜欢android:src="@mipmap/launch" />
因此,我有android:src="@drawable/launch" />
以下是在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"
就这样,你完成了!快乐编码:)