jump

After routing

Set the route parameters first when the file is built:

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

When you need to make a route jump, use:

Navigator.pushNamed(context, "secondPage");
Copy the code

Build routing

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

The difference between

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

1. Named routes are concise and systematic, but cannot pass parameters.
2. The construction route can transmit parameters, but it is cumbersome.

animation

Building 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,
    );
}
Copy the code

The above animation means that the new page slides in from the right when jumping, and slides out to the right when returning.

The introduction of the animation

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

The ginseng

When the jump

the

Previously we said that the named route jump of a flutter cannot pass parameters. Therefore, we can only use the build route to pass the parameter:

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

closed

class SecondPage extends StatefulWidget {
  String title;
  String name;

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

  @override
  State<StatefulWidget> createState() {
    return newMyStatefulWidgetState(); }}Copy the code

return

the

When triggering the event returned by the route, passing the parameter is straightforward. The same or even simpler way to jump, just:

Navigator.of(context).pop('This is the data to be returned to the previous page.');
Copy the code

closed

However, receiving the returned data requires modifying the route from which the jump was triggered:

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

This is how to jump, animate, and transfer parameters to a Flutter route.