preface:

Hello, everyone. I haven't updated the article for you for some time. Everyone has used the mainstream apps of Android and iOS. The native apps have a welcome page, and then wait a few seconds to enter the home page. Today, while I have time, I will use several different ways to realize the case of the welcome page. There's no more nonsense. Let's officially start

preparation:

Need to install the development environment of flutter: you can take a look at the previous tutorial:
1. Installation tutorial of fluent development environment of win system: https://www.jianshu.com/p/152447bc8718
2. MAC system fluent development environment installation tutorial: https://www.jianshu.com/p/bad2c35b41e3

design sketch:

Specific implementation:

Implementation mode I

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,
      ),
    );
  }
}

In the first implementation, we use AnimationController and Animation to handle the countdown of 3 seconds and Animation to load the welcome page

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

Then we judge the navigator after the animation of(context). Pushandremoveuntil() removes the routing stack to ensure that our welcome page only appears once during the running of the app

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

Then we use the FadeTransition component in the build method and the network component nested in the FadeTransition component to handle the display of the cover of the welcome page

 @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,
      ),
    );
  }

Implementation mode 2

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) {
     //Callback at that time
      print('afterTimer='+DateTime.now().toString());
      count++;
      if (count >=3) {
    //Cancel the timer to avoid infinite callback
        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,
       )
    );
  }
}

In the second way, we write a 3-second countdown timer in initState. When we judge that the time exceeds 3 seconds, we execute the toLoing method

  void initState() {
    super.initState();
    int count =0;
    const period =const Duration(seconds:1);
    print('currentTime='+DateTime.now().toString());
    Timer.periodic(period, (timer) {
     //Callback at that time
      print('afterTimer='+DateTime.now().toString());
      count++;
      if (count >=3) {
    //Cancel the timer to avoid infinite callback
        timer.cancel();
        timer =null;
        toLoing();
      }
    });
  }

The toLoing method is similar to the first method, which uses navigator of(context). Pushandremoveuntil() removes the routing stack to ensure that our welcome page only appears once during the running of the app

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

Here are two different ways to realize the shutter flash screen page, and we're finished

Final summary:

The implementation of the flash screen welcome page of FLUENT is relatively simple. There are many ideas in fluent that are different from the original one. What we should pay attention to is that when the route jumps to the home page, we need to call navigator of(context). Pushandremoveuntil() can be used to flash the screen. There must be other ways. I'll start here. You can study more privately. Finally, I hope my article can help you solve problems. In the future, I will contribute more useful code to share with you. If you think the article is good, please pay attention to it and star. Thank you here