Flutter如何通过JSON配置实现MaterialPageRoute动态路由跳转

Dart 是静态编译型语言，不支持直接将字符串作为运行时代码执行，因此无法直接把字符串格式的 action 字段值直接作为页面构造函数使用，你可以通过以下两种常用方案实现需求：

方案1：手动建立Action与页面构造器的映射 #

提前把所有可能跳转的页面和JSON里的action值做映射绑定：

// 先定义页面构造器的类型别名
typedef PageBuilder = Widget Function(BuildContext context);

// 建立action字符串和对应页面的映射表
final Map<String, PageBuilder> actionPageMap = {
  'Foo()': (context) => const Foo(),
  'Bar()': (context) => const Bar(),
  'Rey()': (context) => const Rey(),
  // 后续新增跳转页面，在这里补充对应映射即可
};

然后修改你的 onPressed 逻辑如下：

onPressed: () {
  final actionStr = onboardingTasks[index].tasks[chkBoxindex].action;
  final targetPageBuilder = actionPageMap[actionStr];
  // 匹配到对应页面再执行跳转
  if (targetPageBuilder != null) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: targetPageBuilder),
    );
  } else {
    // 可选兜底逻辑：匹配不到时打印日志/提示异常
    debugPrint('未找到对应跳转页面，action值：$actionStr');
  }
},

方案2：使用Flutter命名路由实现（更简洁） #

如果你项目用了命名路由，实现会更简单：
首先在 MaterialApp 中注册所有路由：

MaterialApp(
  // 其他配置省略
  routes: {
    '/foo': (context) => const Foo(),
    '/bar': (context) => const Bar(),
    '/rey': (context) => const Rey(),
  },
);

将JSON里的action字段值改为对应路由名（比如"/foo"、"/rey"），之后跳转逻辑直接写：

onPressed: () {
  Navigator.pushNamed(
    context, 
    onboardingTasks[index].tasks[chkBoxindex].action
  );
},

优化建议 #

• 可以将JSON中action字段的括号去掉，直接存页面标识（比如"Foo"而非"Foo()"），减少拼写错误导致匹配失败的概率
• 新增跳转页面时，同步更新映射表/路由表即可

内容的提问来源于stack exchange，提问作者BoonieFlutter