The smallest case of flutter using dynamic routing to pass parameters

An encapsulation case of using dynamic routing to pass parameters in Flutter. The sub-component page only needs to receive the arguments parameter. The parameter is a map, which contains the required parameters, similar to json. Configure onGenerateRoute in MaterialApp, and then dynamically determine the passed parameters:

routes list:

    // 命名路由传参
    Map routes = {
      "/home": (content) => Home(),
      "/search": (context) => SearchPage(),
      // 传递参数的形式
      "/store": (context, {arguments}) => Store(arguments: arguments)
    };

 onGenerateRoute function:

      onGenerateRoute: (RouteSettings settings) {
        // 获取声明的路由页面函数
        var pageBuilder = routes[settings.name];
        if (pageBuilder != null) {
          if (settings.arguments != null) {
            // 创建路由页面并携带参数
            return MaterialPageRoute(
                builder: (context) =>
                    pageBuilder(context, arguments: settings.arguments));
          } else {
            return MaterialPageRoute(
                builder: (context) => pageBuilder(context));
          }
        }
        return MaterialPageRoute(builder: (context) => HomePage());
      }

Then when the route jumps, use pushNamed to pass parameters:

                Navigator.pushNamed(context, "/store",
                    arguments: {"title": "京东首页", "price": 100});

Inside the subcomponent, define and receive parameters:

import "package:flutter/material.dart";

class Store extends StatefulWidget {
  const Store({super.key, this.arguments});

  final dynamic arguments;

  @override
  State<Store> createState() => _StoreState();
}

class _StoreState extends State<Store> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
            "${widget.arguments != null ? widget.arguments['title'] : "ThirdPage"}"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("返回上一家"),
          onPressed: () {
            print("返回上一家");
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

The final optimization can be to encapsulate route into a dart package and then introduce it into materialApp to make the logic clearer:

router.dart source code: 

import "package:flutter/material.dart";
import "../main.dart";
import "../pages/home.dart";
import "../pages/search.dart";
import "../pages/store.dart";

// 命名路由传参
Map routes = {
  "/home": (content) => Home(),
  "/search": (context) => SearchPage(),
  "/store": (context, {arguments}) => Store(arguments: arguments)
};

// 定义一个函数，并返回MaterialPageRoute
var onGenerateRoute = (RouteSettings settings) {
  var pageBuilder = routes[settings.name];
  if (pageBuilder != null) {
    if (settings.arguments != null) {
      // 创建路由页面并携带参数
      return MaterialPageRoute(
          builder: (context) =>
              pageBuilder(context, arguments: settings.arguments));
    } else {
      return MaterialPageRoute(builder: (context) => pageBuilder(context));
    }
  }
  return MaterialPageRoute(builder: (context) => HomePage());
};

Introduced in materialApp:

​​​​​​​ 

 

The final rendering: