This article deals with some of the non-flutterstableversion(Up to 25 February 2019)You can consult the documentation for Flutter to see if the new features are synchronizedstableBranch or switch to another branch (e.gmasterExperience in)

The introduction

Routing is a must when we use Flutter to develop our App.

Flutter provides two ways of routing, Navigator. Push () (example) and Navigator. PushNamed () (example).

Both methods have their own advantages and disadvantages:

  1. Navigator.push()
  • Advantages: Dynamic, large degree of freedom, can jump to a new page in different animation ways, and can pass parameters to a new page.
  • Disadvantages: Can cause code redundancy, and not easy to maintain the code. (Of course you can encapsulate it and we won’t discuss that here.)
  1. Navigator.pushNamed()
  • Advantages: Page hopping in a single sentence is similar to the way most current frameworks work.
  • Disadvantages: Can’t pass parameters! Cannot pass parameters! Cannot pass parameters!

choose

In practice, we prefer Named routing.

The only downside is that it doesn’t support passing parameters, which is maddening.

In fact, this Issue was raised in The Issues of Flutter in 2016, but this Issue has not been submitted until this year (so far this function has only been merged into the master branch and not synchronized to the bate or stable).

Overhand experience

  1. So first we’re going to go under the master branch

Execute the flutter channel master command and then run the flutter upgrade command to ensure that you are in the latest version. You can switch to the master branch

  1. Create a Flutter project
  2. Here we aremain.dartIs slightly modified
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: (){
            // TODO
          },
          child: Text("go next page with params"),),),); }}Copy the code
  1. Add a second pagepage.dart
import 'package:flutter/material.dart';

class Page extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text("hi this is next page"),),); }}Copy the code
  1. Add a route and jump while passing parametersmain.dart
import 'package:flutter/material.dart';
// Introduce a new page
import 'page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo'.// Handle Named page jump pass parameters
      onGenerateRoute: (RouteSettings setting) {
        if(setting.name == '/page') {
          return MaterialPageRoute(builder: (context) => Page(id: setting.arguments['id']));
        }
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: (){
            // Pass parameters with Named page jump
            Navigator.pushNamed(context, '/page', arguments: { "id": 1}); }, child: Text("go next page with params"),),),); }}Copy the code
  1. Page accept parameterspage.dart
import 'package:flutter/material.dart';

class Page extends StatelessWidget{
  Page({this.id});
  final int id;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text("hi this is next page, id is $id"),),); }}Copy the code

The effect

To optimize the

Here we’re still going to handle our Named jump in onGenerateRoute, so we’re going to optimize it.

(Currently, it cannot be processed on routes of the MaterialApp. The reason can be seen in the source code.)one) (two))

Call Widget. pageRouteBuilder and pass in Settings (Arguments in Settings)

PageRouteBuilder is written to build a MaterialPageRoute, and the MaterialPageRoute does not pass Settings

So we have to do it ourselves in onGenerateRoute. (Hope the official website can also continue to optimize, emmmm wait and see)

/** * main.dart */
import 'package:flutter/material.dart';
// Introduce a new page
import 'page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // Define routing information
  final Map<String.Function> routes = {
    '/page': (context, {arguments}) => Page(arguments: arguments)
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo'.// Handle Named page jump pass parameters
      onGenerateRoute: (RouteSettings settings) {
        //
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if(pageContentBuilder ! =null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            // Pass parameters with Named page jump
            Navigator.pushNamed(context, '/page', arguments: {'id': 123});
          },
          child: Text("go next page with params"),),),); }}/** * page.dart */

import 'package:flutter/material.dart';

class Page extends StatelessWidget{
  Page({this.arguments});
  final Map arguments;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text("hi this is next page, id is ${arguments ! =null ? arguments['id'] : '0'}"),),); }}Copy the code

The relevant code

flutter_new_feature