Preface:

The classmate of everyone, there was a time not to update the article, everybody used android and iOS mainstream app, native app has a welcome page Then wait a few seconds to enter the home page, today I just minutes before have time several different ways to realize the welcome page of the case, please donate said, we begin

Preparations:

Need to install the flutter development environment: everyone can look at the previous tutorial: 1 win flutter system development environment installed tutorial: www.jianshu.com/p/152447bc8… 2 MAC flutter development environment installed tutorial: www.jianshu.com/p/bad2c35b4…

Effect:

Concrete implementation:

Implementation Method 1
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 (the begin: 0.0, end: 1.0). The 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.net work (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1059109819, & FM = 26 & gp = 0. 2238091618 JPG ", scale: 2.0, fit: boxfit.cover,),); }}Copy the code

The first implementation uses the AnimationController and Animation to handle the 3-second countdown to loading the welcome page and the Animation

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

Then we determine that after the animation ends, navigator.of (context).pushandRemoveUntil () removes the routing stack to ensure that our welcome page appears only once during the app run

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

We then use the FadeTransition component nested in the build method to handle the display of the welcome page cover

@override Widget build(BuildContext context) { // TODO: implement build return FadeTransition( opacity: _animation, child: Image.net work (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1059109819, & FM = 26 & gp = 0. 2238091618 JPG ", scale: 2.0, fit: boxfit.cover,),); }Copy the code
Implementation Method 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) {// Print ('afterTimer='+ datetime.now ().toString()); count++; If (count >=3) {// Cancel timer, 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.net work (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1059109819, & FM = 26 & gp = 0. 2238091618 JPG ", scale: 2.0, fit: boxfit.cover,); }}Copy the code

In the second way we write a 3 second countdown timer in initState and we execute toLoing when we judge the time to be more than 3 seconds

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) {// Cancel timer, avoid infinite callback timer.cancel(); timer =null; toLoing(); }}); }Copy the code

The toLoing method is similar to the first method by removing the routing stack using navigator.of (context).pushandRemoveUntil () to ensure that our welcome page appears only once during the app run

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

Here on the Flutter screen implementation of 2 different ways we are done

Conclusion:

The welcome page of flutter screen is relatively simple to implement. There are a lot of ideas and native differences in flutter. One of the things we notice about flutter is that when we route to the home page we call navigator.of (context).pushandRemoveUntil () I hope my article can help you solve the problem. In the future, I will contribute more useful codes to share with you. If you think the article is good, please pay attention and star. Thank you