Flutter uses a route to jump to the startActivity page similar to Android.

Core classes:

Route: An abstract entry. Represents a page

Navigator: Widget that manages the Route.

Page jump

Common route:

Skip to the next page

Navigator.push(context, MaterialPageRoute(builder: (context)=>TargetPage()));
Copy the code

Return to previous page

Navigator.pop(context); Or the Navigator. Of (context). Pop ();Copy the code

Ps: (context)=>TargetPage(), the syntax for dart. The equivalent of (context) {TargetPage (); }. When there is only one statement in the method body, you can use the => abbreviation

After routing

1. Define a routes first

Return MaterialApp(initialRoute: "/",// { '/':(context)=>MainPage(), '/second':(context)=>TargetPage() }, );Copy the code

2. Go to the next page

Navigator.pushNamed(context, '/second');
Copy the code

3. Return to the previous page

Navigator.pop(context);
Copy the code

Hybrid stack jump

Jump Native to the Flutter page (using Android as an example):

This jump flutter is wrapped in an activity

MainActivity:
Intent intent = new Intent(this,FlutterContainerActivity.class);
startActivity(intent);

FlutterContainerActivity:
@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "defaultRoute");
        setContentView(flutterView);
}
Copy the code
A Flutter jumps to a Native:

The jump of a flutter to Native is implemented through the MethodChannel.

FlutterContainerActivity: @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); FlutterView = flutter. CreateView (this, getLifecycle(),"defaultRoute"); // create MethodChannel new MethodChannel(flutterView,"customName").setMethodCallHandler(new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(@NonNull MethodCall methodCall, @NonNull MethodChannel.Result result) {
                if (methodCall.method.equals("openNativePage")){
                    startActivity(new Intent(FlutterContainerActivity.this,FlutterCallActivity.class));
                    result.success(0);
                }else if(methodCall.method.equals("closeNativePage")){
                    finish();
                    result.success(0);
                }else{ result.notImplemented(); }}});setContentView(flutterView); Static const platChannel = MethodChannel()"customName"); Void openNativePage() async {await platchannel.invokemethod ()'openNativePage'); } // Close Native page platchannel.invokemethod ('closeNativePage')),
Copy the code

Routing and the cords

Pass parameters through the constructor:

Define a constructor in the target function

class TargetPage{
final String text;
const SecondRoute({Key key,this.text}) : super(key: key);
}
Copy the code

Skip to the next page

Navigator.push(context,MaterialPageRoute(builder:(context)=>TargetPage(text:"hello world")))
Copy the code

throughargumentsThe arguments:

This approach is similar to the way data is passed through intents in Android. This mode is specific to named routes. That’s the third optional parameter of pushNamed

@optionalTypeArgs
static Future<T> pushNamed<T extends Object>(
    BuildContext context,
    String routeName, {
    'Object arguments',})Copy the code

The target interface receives the transmitted data using ModalRoute

 final data = ModalRoute.of(context).settings.arguments;
Copy the code

throughonGenerateRouteThe arguments:

Build onGenerateRoute onGenerateRoute is equivalent to a blocker, intercept and then assigned to specify the routing information

onGenerateRoute: (settings) {
        print("onGenerate");

        if (settings.name == '/second') {
          return MaterialPageRoute(
              builder: (context) => TargetPage(
                    text: settings.arguments,
                  ));
        }
        
        return MaterialPageRoute(builder: (context) => MainPage());
},
Copy the code

Skip to the next page

Navigator.pushNamed(context, '/second',arguments: 'hello flutter');
Copy the code

Ps: onGenerateRoute is called only if the specified route cannot be found in the defined routes.

Receive data returned from previous page:

What if you need to get data from the target page and return it like startActivityForResult in Android?

@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
}
Copy the code

From the above we can see that push actually returns a Future object. This is an asynchronous result object, so use async,await

void skip(BuildContext context) async{ final resultData = await Navigator.push(context, MaterialPageRoute(builder: (context)=>TargetPage())); // Print the resultprint(resultData.toString());
}
Copy the code

Target page return

Navigator.pop(context,'hi~~');
Copy the code