内容简介:先上效果图flutter如果不设置启动的第一屏
先上效果图
flutter如果不设置启动的第一屏
根据flutter本来的设定为显示白色,也就是打开App的一瞬间到执行main函数的阶段会有一个白屏显示,这样难免会有点难看,很多app打开会有一个停留3秒或者几秒的图片,并有一个按钮让你点击跳过,那么往下看,这些是怎么实现的
设置第一屏
把图上的那一段代码注释去掉(flutter项目创建完,这段是注释着的)
mipmap这个文件夹如果本来没有,就创建这个文件夹,然后把要启动的第一屏图片放进去,这样启动app的时候就会显示这一张图片了
android:gravity="fill"表示图片填充满屏幕大小
停留5秒和跳过按钮
直接上代码,注释在代码里面
import 'package:flutter/material.dart'; import 'dart:async'; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; void main(){ // debugPaintSizeEnabled = true; runApp(MaterialApp( debugShowCheckedModeBanner: false, title: '签到', theme: ThemeData( primaryColor: Colors.yellow ), home: StartApp() )); } class StartApp extends StatefulWidget{ _StartAppState createState() => _StartAppState(); } class _StartAppState extends State<StartApp>with SingleTickerProviderStateMixin{ var loginState; AnimationController _animationController; Animation _animation; void initState(){ super.initState(); //创建动画控制器 _animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 5000)); _animation = Tween(begin: 1.0,end: 1.0).animate(_animationController); _animation.addStatusListener((status){ if(status == AnimationStatus.completed){ // //这边的添加动画的监听,当动画5秒后的状态是completed完成状态,则执行这边的代码,跳转到登录页,或者其他页面 // } }); _animationController.forward(); } @override void dispose(){ _animationController.dispose(); super.dispose(); } @override Widget build(BuildContext context){ return FadeTransition( opacity: _animation, child: ConstrainedBox( //让他的child充满整个屏幕 constraints: BoxConstraints.expand(), child: Stack( // children: <Widget>[ Container( height:double.infinity, //这边放一张图用于显示5秒的底图,这张图和上面的图一样,这样就有连贯起来的效果了 child:Image.asset( 'image/first.jpg', scale:1.0, fit:BoxFit.fill ), ), Positioned( top: 50.0, right: 20.0, child: FlatButton( color: Colors.green, highlightColor: Colors.blue, colorBrightness: Brightness.dark, splashColor: Colors.grey, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0) ), child: Text("跳过"), onPressed: (){ _animationController.dispose(); // //当点击跳过按钮的时候,则执行这边的代码,跳转到登 //录页,或者其他页面 }, ), ) ], ) ) ); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。