Implementation Example of flutter Routing Jump

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,
     );
    },
   );
  }
 },
);