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