Flutter: 设置简单的启动屏
有短暂的白屏时间
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '启动图demo',
debugShowCheckedModeBanner: false,
home: AnimatedSplashScreen(
home: HomePage(),
),
);
}
}
class AnimatedSplashScreen extends StatefulWidget {
final Widget home;
const AnimatedSplashScreen({Key key, @required this.home}) : super(key: key);
@override
SplashScreenState createState() => new SplashScreenState();
}
class SplashScreenState extends State<AnimatedSplashScreen>
with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation<double> animation;
Duration keepTimer = Duration(seconds: 3);
int get showSecond => keepTimer.inSeconds;
Timer timer;
bool isSkip = false;
startTime() async {
await Future.delayed(keepTimer);
_toHome();
}
_toHome() {
if (isSkip) return;
isSkip = true;
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) => widget.home));
}
@override
void initState() {
super.initState();
animationController =
AnimationController(vsync: this, duration: Duration(seconds: 2));
animation =
CurvedAnimation(parent: animationController, curve: Curves.easeOut);
animation.addListener(() => this.setState(() {}));
animationController.forward();
// startTime();
Duration step = Duration(seconds: 1);
timer = Timer.periodic(Duration(seconds: 1), (_) {
setState(() {
keepTimer -= step;
});
if (keepTimer == Duration.zero) {
timer.cancel();
}
});
}
@override
void dispose() {
animationController?.dispose();
timer?.cancel();
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
super.dispose();
}
@override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
right: 10,
bottom: 50,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: FlatButton(
color: Colors.grey[300],
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
onPressed: _toHome,
child: Text('跳过 $showSecond'),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: Image.asset(
'assets/images/powered_by.png',
height: 25.0,
fit: BoxFit.scaleDown,
))
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/images/logo.png',
width: animation.value * 250,
height: animation.value * 250,
),
],
),
],
),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: RaisedButton(
child: Text('data'),
onPressed: () async {},
),
),
);
}
}
配置xml
λ flutter --version
Flutter 1.12.17-pre.61 • channel master • https://github.com/flutter/flutter.git
Framework • revision 1c7a1c3873 (4 hours ago) • 2019-12-04 07:51:54 +0100
Engine • revision 3e6d6bc612
Tools • Dart 2.7.0 (build 2.7.0-dev.2.1 19fc1016da)
添加启动图 android\app\src\main\res\drawable\bg.png
修改android\app\src\main\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/holo_blue_light" />
<!-- You can insert your own image assets here 删除下面的注释 -->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/bg" />
</item>
</layer-list>
Flutter: 设置简单的启动屏的更多相关文章
- iOS 实现启动屏动画(Swift实现,包含图片适配)
代码地址如下:http://www.demodashi.com/demo/12090.html 准备工作 首先我们需要确定作为宣传的图片的宽高比,这个一般是与 UI 确定的.一般启动屏展示会有上下两部 ...
- React Native(ios)项目中logo,启动屏设置
由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...
- Ios8 Xcode6 设置Launch Image 启动图片
http://blog.sina.com.cn/s/blog_6c97abf10102voui.html Http://Www.woowen.com/Swift/2014/12/12/Ios8设置La ...
- android 决解启动屏白黑屏会延迟几秒的问题
通常写启动屏,都有个很不喜欢的问题,就是会空白几秒才显示界面,而且界面还是很简单的! 解决办法 1 写一个透明的主题,一般启动屏都是不要bar的所以继承AppTheme.NoActionBar < ...
- iOS 8 Xcode6 设置Launch Image 启动图片
本人apem http://www.mamicode.com/info-detail-494411.html 如何设置App的启动图,也就是Launch Image? Step1 1.点击Image. ...
- centos设置服务开机启动
Linux CentOS设置服务开机启动的方法 by 天涯 · 2013/07/26 CentOS设置服务开机启动的两种方法 1.利用 chkconfig 来配置启动级别 在CentOS或者RedHa ...
- android 渐变展示启动屏
启动界面Splash Screen在应用程序是很常用的,往往在启动界面中显示产品Logo.公司Logo或者开发者信息,如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段 ...
- iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装
简单九宫格锁屏功能的实现与封装 首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果 你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...
- CentOS设置服务开机启动的方法
CentOS设置服务开机启动的两种方法 1.利用 chkconfig 来配置启动级别在CentOS或者RedHat其他系统下,如果是后面安装的服务,如httpd.mysqld.postfix等,安装后 ...
随机推荐
- PowerQuery合并查询原理
PowerQuery的合并查询比Excel中的VLOOKUP更加强大,下面对查询的类型做一个梳理, 1.左外部(第一个中的所有行,第二个中的匹配行):用左边表内的所有行去右边找它的匹配项 2.右外部( ...
- Java——I/O操作之拷贝文件
功能描述: 利用文件输入输出流编写一个实现文件拷贝的程序,源文件名和目标文件名通过控制台输入. public static void main(String[] args) { Scanner in= ...
- Java 高并发 解决方案
1.HTML静态化 2.图片服务器分离 3.数据库集群和库表散列 4.缓存 5.镜像 6.负载均衡 1)硬件四层交换 2)软件四层交换 一:高并发高负载类网站关注点之数据库 二:高并发高负载网站的系统 ...
- yuan先生博客地址
1 Web应用 https://www.cnblogs.com/yuanchenqi/articles/8869302.html2 http协议 https://www.cnblogs.com/yu ...
- 【STM32】串口
一. 串口中断使能问题 错误: 串口只能接收一次数据,从串口助手发第二个数据时接收不到. 分析: 在UART_Receive_IT(huart)函数里,回调函数的上面有如下代码: 这几行代码的作用是关 ...
- Pytest(8)parametrize参数化
前言 当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化. 官方示 ...
- Educational Codeforces Round 97 (Rated for Div. 2)【ABCD】
比赛链接:https://codeforces.com/contest/1437 A. Marketing Scheme 题解 令 \(l = \frac{a}{2}\),那么如果 \(r < ...
- K - Japan(线段树)
Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...
- HDU-6290 奢侈的旅行 (Dijkstra+堆优化)
高玩小Q不仅喜欢玩寻宝游戏,还喜欢一款升级养成类游戏.在这个游戏的世界地图中一共有nn个城镇,编号依次为11到nn.这些城镇之间有mm条单向道路,第ii 条单项道路包含四个参数ui,vi,ai,biu ...
- Musical Theme POJ - 1743 后缀数组
A musical melody is represented as a sequence of N (1<=N<=20000)notes that are integers in the ...