先上效果图

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();                                    //                                    //当点击跳过按钮的时候,则执行这边的代码,跳转到登                                    //录页,或者其他页面                                },                            ),                        )                    ],                )            )        );    }}