Implementation Example of flutter Routing Jump
- 2021-12-05 07:24:10
- 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 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.
Be careful not to have two materialapp when a single-page routing jump, because navigation depends on this. If there are two, there will be two navigations
1. Two routing parameter transfer methods: the routing component of DetailScreen jump
1. Pass parameters directly to the routing subcomponent constructor
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(todo: todos[index]),
),
);
1. Pass RouteSettings Transfer parameter
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(),
settings: RouteSettings(
arguments: todos[index],
),
),
);
2. Define the route:
1. Add attributes to MaterialApp:
initialRoute And routes To define our route
new MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => TodosScreen(todos: todos),
'/detail': (context) => DetailScreen(),
},
title: 'ssss',
);
However, it is important to note that when using initialRoute, you need to make sure that you do not define the home attribute at the same time.
2. Pass reference to specific route:
1) Define the parameters to pass
class ScreenArguments {
final String title;
final String message;
ScreenArguments(this.title, this.message);
}
2) Create a component to get parameters
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
final ScreenArguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(
);
}
}
3) Register the component in the routing table
MaterialApp(
routes: {
ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
},
);
4) Navigate to the component
RaisedButton(
onPressed: () {
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
);
},
),
5) onGenerateRoute extraction parameters
MaterialApp(
onGenerateRoute: (settings) {
if (settings.name == PassArgumentsScreen.routeName) {
final ScreenArguments args = settings.arguments;
return MaterialPageRoute(
builder: (context) {
return PassArgumentsScreen(
title: args.title,
message: args.message,
);
},
);
}
},
);