Flutter路由报错：无法找到RouteSettings("/tests")的生成器求助

问题描述 #

配置Flutter路由实现页面跳转时，执行跳转函数触发错误，以下是相关代码及错误信息，需排查问题所在。

错误信息 #

错误：在_WidgetsAppState中找不到路由RouteSettings("/tests", null)的生成器。

相关代码 #

main.dart #

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:nice_buttons/nice_buttons.dart';

void main() => runApp(MaterialApp(
  home: Main(),
));

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "uas",
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              transform: GradientRotation(108.7 * 3.14159 / 180),
              stops: [0.11, 0.882],
              colors: [
                Color.fromRGBO(221, 22, 224, 1),
                Color.fromRGBO(111, 22, 190, 1),
              ],
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Center(
                child: Image.asset(
                  '../assets/Playloop_text.png',
                  height: 300,
                  width: 300,
                ),
              ),
              NiceButtons(
                stretch: false,
                progress: true,
                gradientOrientation: GradientOrientation.Horizontal,
                endColor:  Color.fromRGBO(221, 22, 224, 1),
                startColor: Color.fromRGBO(111, 22, 190, 1) ,
                borderColor: Color.fromRGBO(111, 22, 190, 1),
                borderThickness: 3,
                borderRadius: 20,
                onTap: (finish) {
                  print('berhasil');
                  Timer(Duration(seconds: 5), () {
                    Navigator.pushNamed(context, '/test');
                    finish();
                  });
                },
                child: Text(
                  'Next ->',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

route.dart #

import 'package:flutter/material.dart';
import 'package:uas/main.dart';
import 'package:uas/menu.dart';

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {

    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => Main());
      case '/test':
        return MaterialPageRoute(builder: (_) => MenuMusic());
      default:
        return _errorRoute();
    }
  }

  static Route<dynamic> _errorRoute() {
    return MaterialPageRoute(builder: (_) {
      return Scaffold(
        appBar: AppBar(title: Text("Error")),
        body: Center(child: Text('Error page')),
      );
    });
  }
}

问题原因 #

1. 路由路径不匹配：错误提示的路由是/tests（末尾多了一个"s"），但代码中注册的路由是/test，跳转时调用的也是/test，说明实际运行时存在笔误，调用了错误的路由路径。
2. 嵌套MaterialApp且未配置路由生成器：main函数中创建了一个MaterialApp，同时Main组件内部又返回了另一个MaterialApp，导致导航上下文混乱；且两个MaterialApp都未配置onGenerateRoute关联自定义的RouteGenerator，系统无法找到对应路由的生成规则。

修复步骤 #

步骤1：修正路由路径 #

确保跳转代码中的路由路径和RouteGenerator中注册的完全一致，将错误的/tests改为/test（若为笔误导致）。

步骤2：重构MaterialApp配置，移除嵌套 #

只保留一个MaterialApp，并在其中配置onGenerateRoute和初始路由，修改后的main.dart如下：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:nice_buttons/nice_buttons.dart';
import 'package:uas/route.dart'; // 引入路由文件

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "uas",
      initialRoute: '/', // 设置初始路由为根页面
      onGenerateRoute: RouteGenerator.generateRoute, // 关联路由生成器
    );
  }
}

class Main extends StatelessWidget {
  const Main({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 直接返回Scaffold，不再嵌套MaterialApp
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            transform: GradientRotation(108.7 * 3.14159 / 180),
            stops: [0.11, 0.882],
            colors: [
              const Color.fromRGBO(221, 22, 224, 1),
              const Color.fromRGBO(111, 22, 190, 1),
            ],
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Image.asset(
                '../assets/Playloop_text.png',
                height: 300,
                width: 300,
              ),
            ),
            NiceButtons(
              stretch: false,
              progress: true,
              gradientOrientation: GradientOrientation.Horizontal,
              endColor: const Color.fromRGBO(221, 22, 224, 1),
              startColor: const Color.fromRGBO(111, 22, 190, 1),
              borderColor: const Color.fromRGBO(111, 22, 190, 1),
              borderThickness: 3,
              borderRadius: 20,
              onTap: (finish) {
                print('berhasil');
                Timer(const Duration(seconds: 5), () {
                  Navigator.pushNamed(context, '/test');
                  finish();
                });
              },
              child: const Text(
                'Next ->',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

步骤3：验证路由生成器 #

确认route.dart中的MenuMusic组件已正确导入，无拼写错误。

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