Flutter Routing Jump Animation and Parameter Explanation (Simplest)

Route

When doing Android/iOS native development, to open a new page, you have to know your target page object, then initialize an Intent or ViewController, and then launch a new page through startActivity or pushViewController. You can't jump to a new page just like web1. Of course, you can add a middle layer to realize these functions.

Flutter is native to support routing. framework of Flutter provides the implementation of routing jump. We can use these functions directly.

Introduction to Flutter Routing

There are routes in Flutter to support all routing scenarios, push, pop pages, parameter transfer between pages and so on. flutter can be divided into two types of routes, one is direct registration, and parameters cannot be passed. The other is to construct an instance by itself, and you can pass parameters. For the time being, we define them as static routing and dynamic routing.

Jump

Named route

Set the routing parameters first when the file is built:

new MaterialApp(
 //  Code 
 routes: {
 "secondPage":(BuildContext context)=>new SecondPage(),
 },
);

Use it directly when you need to make a route jump:

Navigator.pushNamed(context, "secondPage");

Build a route

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
 return new SecondPage();
}))

Difference

The advantages and disadvantages of the above two routes are obvious:

Named routes are concise and systematic, but they cannot pass parameters. Constructing routes can pass parameters, but it is tedious.

Animation

Build Animation

First, build an animation effect, such as:

static SlideTransition createTransition(
 Animation<double> animation, Widget child) {
 return new SlideTransition(
  position: new Tween<Offset>(
  begin: const Offset(1.0, 0.0),
  end: const Offset(0.0, 0.0),
 ).animate(animation),
  child: child,
 );
}

The above animation means that the new page is drawn from the right when jumping, and drawn to the right when returning.

Introduce animation

Navigator.push<String>(
 context,
 new PageRouteBuilder(pageBuilder: (BuildContext context,
  Animation<double> animation,
  Animation<double> secondaryAnimation) {
  //  Jump routing object 
  return new Wechat();
 }, transitionsBuilder: (
 BuildContext context,
 Animation<double> animation,
 Animation<double> secondaryAnimation,
 Widget child,
 ) {
 return MyStatefulWidgetState
  .createTransition(animation, child);
 }))

Reference transmission

Jump time

Biography

As we said earlier, the named route jump of flutter cannot be passed. Therefore, we can only pass parameters in the way of building routes:

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
 return new SecondPage(
 title:' Parameters here ' , 
 name:' Here is the name parameter '
 );
}))

Receive

class SecondPage extends StatefulWidget {
 String title;
 String name;

 Wechat({
 Key key,
 this.title,
 this.name
 }) : super(key: key);

 @override
 State<StatefulWidget> createState() {
 return new MyStatefulWidgetState();
 }
}

On return

Biography

When triggering an event returned by a route, passing parameters is 10 points simple. It is the same as the way 1 when jumping, or even simpler, just need:

Navigator.of(context).pop(' This is to be returned to the top 1 Pages of data ');

Receive

However, the data on receiving the return needs to modify the route when the jump was triggered earlier:

//  Named route 
Navigator.pushNamed<String>(context, "ThirdPage").then( (String value){
 // Processing code 
});
//  Build a route 
Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
 return new ThirdPage(title:" Please enter a nickname ");
})).then( (String result){
 // Processing code 
});

These are the related methods of Flutter routing jump, animation and parameter transmission, which can be easily dealt with according to gourd painting.

Summarize