Flutter应用页面路由无法跳转至其他页面问题求助

问题根源 #

你的路由表appRoutes中，about的路由键定义为'about'，但跳转时调用的是Navigator.pushNamed(context, '/about')，两者路由键不匹配，导致Flutter无法找到对应的路由生成器。

修复方案 #

有两种可行的修复方式：

方式1：统一路由键为带斜杠格式 #

修改route.dart中的路由表，给所有非根路由的键添加前缀/，保持与跳转路径一致：

import 'package:quizapp/about/about.dart';
import 'package:quizapp/home/home.dart';
import 'package:quizapp/login/login.dart';
import 'package:quizapp/topic/topic.dart';
import 'package:quizapp/profile/profile.dart';

var appRoutes = {
  '/': (context) => const HomeScreen(),
  '/about': (context) => const AboutScreen(),
  '/login': (context) => const LoginScreen(),
  '/topic': (context) => const TopicScreen(),
  '/profile': (context) => const ProfileScreen()
};

这种方式无需修改跳转代码，更符合Flutter路由的常规命名规范。

方式2：修改跳转代码匹配路由键 #

如果不想调整路由表，可将home.dart中的跳转代码改为不带斜杠的路由名：

ElevatedButton(
  onPressed: () => Navigator.pushNamed(context, 'about'),
  child: const Text('About Page'),
)

验证修复 #

修改完成后重新运行应用，点击首页的"About Page"按钮，即可正常跳转到About页面。

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