你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
添加如下所示的页面和路由可能会有所帮助
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
其他回答
对于那些像我一样严格按照步骤来做的人来说,它仍然没有发挥作用……
如果你有一个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
目前还没有一个很好的例子,但你可以自己使用每个平台的本地工具:
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。
最简单的方法是使用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*”已经改变,并添加了新的启动画面。
你应该试试下面的代码,为我工作
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,
)),
),
);
}
}