你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。
当前回答
目前还没有一个很好的例子,但你可以自己使用每个平台的本地工具:
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。
其他回答
对于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" />
这是在Flutter中添加动态启动画面的最佳方法。
主要。飞镖
import 'package:flutter/material.dart';
import 'constant.dart';
void main() => runApp(MaterialApp(
title: 'GridView Demo',
home: SplashScreen(),
theme: ThemeData(
primarySwatch: Colors.red,
accentColor: Color(0xFF761322),
),
routes: <String, WidgetBuilder>{
SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
HOME_SCREEN: (BuildContext context) => BasicTable(),
//GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
},
));
SPLASHSCREEN。飞镖
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';
class SplashScreen extends StatefulWidget {
@override
SplashScreenState createState() => new SplashScreenState();
}
class SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
var _visible = true;
AnimationController animationController;
Animation<double> animation;
startTime() async {
var _duration = new Duration(seconds: 3);
return new Timer(_duration, navigationPage);
}
void navigationPage() {
Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
}
@override
dispose() {
animationController.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 2),
);
animation =
new CurvedAnimation(parent: animationController, curve: Curves.easeOut);
animation.addListener(() => this.setState(() {}));
animationController.forward();
setState(() {
_visible = !_visible;
});
startTime();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: new Image.asset(
'assets/images/powered_by.png',
height: 25.0,
fit: BoxFit.scaleDown,
),
)
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image.asset(
'assets/images/logo.png',
width: animation.value * 250,
height: animation.value * 250,
),
],
),
],
),
);
}
}
常量。飞镖
String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';
主屏幕。飞镖
import 'package:flutter/material.dart';
class BasicTable extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Table Widget")),
body: Center(child: Text("Table Widget")),
);
}
}
Flutter为您提供了默认的启动画面的能力,但有很多插件可以做这项工作。如果你不想使用插件来完成任务,你担心添加一个新的插件可能会影响你的应用程序大小。然后你可以这样做。
为安卓
打开launch_background.xml,然后你可以放入启动画面图像,或者你想要的渐变颜色。这是用户打开应用程序时看到的第一件事。
为IOS
用Xcode打开你的应用,点击Runner > asset。xcassets > LaunchImage,你可以在这里添加图像。如果你想编辑启动屏幕图像的位置,你可以在LaunchScreen.storyboard上编辑。
对于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。
dev已经给出了最好的答案,这不是一个bug,也不是一个问题,只是配置。 花点时间阅读,一切都会迎刃而解。祝大家有愉快的一天。
https://flutter.dev/docs/development/ui/advanced/splash-screen
推荐文章
- 错误地使用父数据小部件。扩展小部件必须放置在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 "