Flutter Routing Jump Animation and Parameter Explanation (Simplest)
- 2021-11-01 04:32:29
- OfStack
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