Flutter cool animation effects routing

Now the route Flutter effect has been very good to meet the needs of most App, but who do not want their cool even more dazzling App that, here are a few cool animation route.

In fact, the principle is very simple route animation, and inheritance is to rewrite PageRouterBuilderthis class of transitionsBuildermethods.

However, this method still has a lot written by different wording, resulting animation is different.

1, fade fade animation

First write a main entry method, or something simpler format, but the home property, RouterFirst components using our custom, we need to write again. Code entry file is as follows:

import 'package:flutter/material.dart';
import 'pages.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:RouterFirst()
    );
  }
}

Then pages.dart, this document is to generate two pages (Flutter in the page is Widget, you're going to leave this page area). With two pages can be achieved routing the jump.

Here we first use an ordinary routing in place, take a look at the effect.

Import ' Package: Flutter / material.dart ' ; 

class RouterFirst the extends StatelessWidget { 
  @override 
  the Widget Build (BuildContext context) { 
    return the Scaffold ( 
      the backgroundColor: Colors.red, // background color 
      appbar: the AppBar ( 
        title: the Text ( ' FirstPage ' , style: the TextStyle (the fontSize: 36.0 )), 
        Elevation: 4.0 , // degree of integration of the body 0-4 and the following, the spaced state 0 is not displayed, the default is not written. 4 
      ), 
      body: Center ( 
        Child: MaterialButton ( 
          Child: Icon ( 
            Icons. navigate_next,
            color: Colors.white,
            size: 64.0
          ),
          onPressed: (){
             Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
               return RouterSecond();
             }));
          },
        ),
      ),
      
    );
  }
}

class RouterSecond extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue,
      appBar: AppBar(
        title: Text('SecondPage',style:TextStyle(fontSize:36.0),),
        backgroundColor: Colors.lightBlue,
        leading:Container(),
        elevation: 0.0,
      ),
      body:Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_before,
            color:Colors.white,
            size:64.0
          ),
          onPressed: ()=>Navigator.of(context).pop(),
        ),
      )
    );
  }
}

The above code there is a new knowledge point, you need to learn about:

AppBar Widger's elevation attributes: This value is the degree of integration of AppBar when scrolling, when scrolling is generally the default 4.0, we are now set to 0.0, it is a fully integrated and body.

After writing the page code, you can already perform basic navigation, but there is nothing cool animation.

Custom CustomRoute Widget

This is the routing method you want to customize, custom first inherited from a common route class constructor PageRouterBuilder. After inheriting override the parent class CustomRouteconstructor.

Constructors can be simply understood as: as long as the call this class or a Widget, in the constructor of all code executed.

code show as below:

class CustomRoute extends PageRouteBuilder{
  final Widget widget;

  //构造方法
  CustomRoute(this.widget)
    :super(
      transitionDuration:Duration(seconds: 2), //过渡时间
      pageBuilder:( //构造器
        BuildContext context,
        Animation<double> animation1,
        Animation<double> animation2,
      ){
        return widget;
      },
      transitionsBuilder:(
        BuildContext context,
        Animation< Double > animation1, 
        Animation < Double > animation2, 
        the Widget Child 
      ) { 
        return FadeTransition ( 
          Opacity: Tween (the begin: 0.0 , End: 1.0 ) 
          .animate (CurvedAnimation ( 
            parent: animation1, 
            Curve: Curves.fastOutSlowIn,   // animation curve gradually fade transitions hidden 
          )), 
          Child: Child, 
        ); 
      } 
    ); 
}

• FadeTransition: fade fade transition effect, mainly provided opactiy (transparency) attribute, the value of 0.0-1.0.

• animate: the style of animation, the animation curve is generally used components (CurvedAnimation).

• curve: the animated rhythm, which is often said of the curve, Flutter prepared a lot of rhythm, by changing the animation cancellation can make a lot of different effects.

• transitionDuration: Set the animation duration, recommended between 1 and 2 again.

Finally, should the above code changes onPressed:

onPressed: (){
            // Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
            //   return RouterSecond();
            // }));
            Navigator.of(context).push(CustomRoute(RouterSecond()));
   },

Finished writing the code, we can already see with fade fade animation when switching routing.