Preface:

Dear students, during the recent National Day holiday, BECAUSE I didn’t go back to my hometown for the holiday (didn’t buy tickets), I wrote some small cases of flutter to share with you (the animation cases of flutter self-defined routing). So without further ado, we will officially start

The preparatory work

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:

Gradient routing animation

First we’re going to define a custom routing class that inherits PageRouteBuilder and then we’re going to rewrite the constructor by passing in a Widget variable that we define in the constructor and then we’re going to add some properties when spuer points to the parent constructor

TransitionDuration, pageBuilder, transitionsBuilder and so on and then we return FadeTransition to implement the gradient effect concrete code

import 'package:flutter/material.dart'; /** ** Created by :xuqing * October 5, 2020 19:06:43 * GradualChangeRoute extends PageRouteBuilder{Final Widget Widget; GradualChangeRoute(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, Return FadeTransition(opacity: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn ) ), child: child, ); }); }Copy the code

Specific call:

Navigator.of(context).push(GradualChangeRoute(SencondPage()));
Copy the code

Scaling route animation

The implementation is similar to the above gradient which requires custom route inheritance PageRouteBuilder except when we return, we return

ScaleTransition property to achieve a ScaleTransition route animation effect specific code:

import 'package:flutter/material.dart'; /** ** Created by :xuqing * October 5, 2020 19:06:43 * Class ZoomRoute extends PageRouteBuilder{final Widget Widget; ZoomRoute(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, Return ScaleTransition(scale: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn )), child: child, ); }); }Copy the code

Specific call:

 Navigator.of(context).push(ZoomRoute(SencondPage()));
Copy the code

#### Rotate and zoom and animate the route:We do this in a similar way to the above gradient where we need a custom route to inherit the PageRouteBuilder except when we return we return the RotationTransition rotation property and then we nested the ScaleTransition inside the rotation property component child The component that scales the property returns our defined child as follows

Return RotationTransition(turns: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: Animation1, Curve: Curves. FastOutSlowIn), child: ScaleTransition(scale: Tween(begin: 0.0,end: Animate (Parent: animation1, Curve: Curves. FastOutSlowIn), child: child,),);Copy the code

Complete rotation and scaling routing class code:

import 'package:flutter/material.dart'; /** ** Created by :xuqing * October 5, 2020 19:06:43 * */ Class RotateAndZoomRoute extends PageRouteBuilder{final Widget Widget; RotateAndZoomRoute(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, Widget child){return RotationTransition(turns: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: Animation1, Curve: Curves. FastOutSlowIn), child: ScaleTransition(scale: Tween(begin: 0.0,end: Animate (Parent: animation1, Curve: Curves. FastOutSlowIn), child: child,),); }); }Copy the code

Specific call:

 Navigator.of(context).push(RotateAndZoomRoute(SencondPage()));
Copy the code

Slide left and right route animation:

The implementation is similar to the above gradient which requires custom route inheritance PageRouteBuilder except when we return, we return

The SlideTransition property is used to animate the left/right sliding route.

Return SlideTransition(position: Tween<Offset>(begin: Offset(-1.0,0.0), end:Offset(0.0,0.0),). Animate (Parent: animation1, curve: Curves.fastOutSlowIn )), child: child, );Copy the code

Complete left and right sliding routing class code:

import 'package:flutter/material.dart'; import 'second_page.dart'; import '.. /routes/gradual_change_route.dart'; import '.. /routes/zoom_route.dart'; import '.. /routes/rotateandzoom_route.dart'; import '.. /routes/sliding_around_route.dart'; /** ** Founder: xuqing * Created on 5 October 2020 16:57:33 * * * */ class FirstPage extends StatelessWidget {FirstPage({Key Key}) : super(Key: Key); TextStyle styles=TextStyle(fontSize: 20,color: Colors.white); @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( backgroundColor: Colors. Blue, appBar: appBar (title: Text("Firstpage",style: TextStyle(fontSize: 36.0), elevation: 4,), body: Center( child:Column( children: <Widget>[ MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" gradient" style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(GradualChangeRoute(SencondPage())); }, ), MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" zoom", style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(ZoomRoute(SencondPage())); }, ), MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" scaling and rotation," style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(RotateAndZoomRoute(SencondPage())); }, ), MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" left" style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(SlidingAroundRoute(SencondPage())); }, ), ], ) ), ); }}Copy the code

Specific call:

 Navigator.of(context).push(SlidingAroundRoute(SencondPage()));
Copy the code

This concludes our discussion of custom route animations. Of course, there are many other animate properties available in the Flutter class for those who are interested in trying them out for themselves

Conclusion:

The route jump animation in the flutter is relatively easy to implement. The FLUTTER SDK already provides many useful animation properties for us to call. All we need to do is to call each other and nest them to achieve cool animation interaction. I will contribute more useful code to share with you in the future. If you think the article is good, please pay attention and star. Thank you

The project address

Yards cloud: gitee.com/qiuyu123/cu…