Flutter 闪屏页面的几种实现方式

前言 ：

各位同学大家好，有段时间没有给大家更新文章了，大家都有用过安卓和iOS主流的 app ，原生app都有一个欢迎页面 然后等待几秒钟进入主页，今天趁着有时间我就分钟几种不同的方式来实现欢迎页面的案例,废话不多说，我们正式开始

准备工作 ：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

screenrecorder-2020-11-11-17-52-46-295[00_00_00--00_00_20].gif

具体实现：

实现方式一

import 'package:flutter/material.dart';
import 'my_homepage.dart';
class SplashScreen extends StatefulWidget {
  SplashScreen({Key key}) : super(key: key);
  @override
  _SplashScreenState createState() {
    return _SplashScreenState();
  }
}
class _SplashScreenState extends State<SplashScreen>  with  SingleTickerProviderStateMixin{
   AnimationController _controller;
   Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller=AnimationController(vsync: this,duration:Duration(milliseconds: 3000) );
    _animation=Tween(begin: 0.0,end: 1.0).animate(_controller);
    _animation.addStatusListener((status) {
      if(status==AnimationStatus.completed){
        Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (Context){
          return  MyHomePage();
        }), (route) => route==null);
      }
    });
    _controller.forward();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FadeTransition(
      opacity: _animation,
      child: Image.network(
    "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1059109819,2238091618&fm=26&gp=0.jpg",
        scale: 2.0,
        fit: BoxFit.cover,
      ),
    );
  }
}

第一种实现方式我们用到 AnimationController 和Animation 来处理加载欢迎页面倒计时3秒和动画来实现

_controller=AnimationController(vsync: this,duration:Duration(milliseconds: 3000) );

然后我们判断动画结束之后 Navigator.of(context).pushAndRemoveUntil（）移除路由栈保证我们欢迎页在app运行期间只出现一次

    if(status==AnimationStatus.completed){
        Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (Context){
          return  MyHomePage();
        }), (route) => route==null);
      }
    });

然后我们在build 方法里面使用 FadeTransition 组件里面嵌套network 组件处理欢迎页面封面的显示

 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FadeTransition(
      opacity: _animation,
      child: Image.network(
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1059109819,2238091618&fm=26&gp=0.jpg",
        scale: 2.0,
        fit: BoxFit.cover,
      ),
    );
  }

实现方式二

import 'package:flutter/material.dart';
import 'dart:async';
import 'my_homepage.dart';
class SplashScreen extends StatefulWidget {
  SplashScreen({Key key}) : super(key: key);
  @override
  _SplashScreenState createState() {
    return _SplashScreenState();
  }
}
class _SplashScreenState extends State<SplashScreen> {
  void initState() {
    super.initState();
    int count =0;
    const period =const Duration(seconds:1);
    print('currentTime='+DateTime.now().toString());
    Timer.periodic(period, (timer) {
     //到时回调
      print('afterTimer='+DateTime.now().toString());
      count++;
      if (count >=3) {
    //取消定时器，避免无限回调
        timer.cancel();
        timer =null;
        toLoing();
      }
    });
  }
  void  toLoing(){
    Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (Context){
      return  MyHomePage();
    }), (route) => route==null);
    }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
   return Container(
       child: Image.network(
         "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1059109819,2238091618&fm=26&gp=0.jpg",
         scale: 2.0,
         fit: BoxFit.cover,
       )
    );
  }
}

第二种方式我们在initState写了一个3秒钟倒计时计时器 我们在判断时间超过3秒就执行 toLoing方法

  void initState() {
    super.initState();
    int count =0;
    const period =const Duration(seconds:1);
    print('currentTime='+DateTime.now().toString());
    Timer.periodic(period, (timer) {
     //到时回调
      print('afterTimer='+DateTime.now().toString());
      count++;
      if (count >=3) {
    //取消定时器，避免无限回调
        timer.cancel();
        timer =null;
        toLoing();
      }
    });
  }

toLoing 方法和第一种方式类似都是使用 Navigator.of(context).pushAndRemoveUntil()移除路由栈保证我们欢迎页在app运行期间只出现一次

  void  toLoing(){
    Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (Context){
      return  MyHomePage();
    }), (route) => route==null);
    }

到此flutter 闪屏页面实现 2种不同方式我们就讲完了

最后总结：

flutter 闪屏欢迎页面实现方式相对简单，flutter里面有很多思路和原生差不打我们注意的就是路由跳转到主页的时候我们要调用 Navigator.of(context).pushAndRemoveUntil() 即可 闪屏方式肯定还有其他方式我这边就展开讲了 各位同学可以私下自己多研究 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦