如何从独立Drawer文件调用Flutter路由？问题求助

我看了你的代码和报错信息，问题主要出在路由配置错误、不必要的状态更新和导航逻辑顺序上，下面一步步帮你修复：

错误根源分析 #

• 你的main.dart里，profile路由的路径少了开头的/，写成了'profile'，而pushNamed要求路由必须以/开头，这直接导致跳转失败。
• DrawerMenu里的setState完全多余，点击抽屉项不需要更新抽屉的状态，这只会触发不必要的组件重建，甚至可能干扰导航上下文。
• 导航顺序有问题：你先调用pushNamed再pop抽屉，这可能导致导航上下文还没准备好就执行跳转，应该先关闭抽屉再跳转，或者使用pushReplacementNamed避免页面堆叠过多。
• Login页面没有用Scaffold包裹，导致页面没有AppBar和返回按钮，体验缺失。

修复后的完整代码 #

1. main.dart（修复路由配置） #

import 'package:flutter/material.dart';
import 'module/Dashboard.dart';
import 'module/Login.dart';
import 'module/Profile.dart';

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

class RouteApp extends StatefulWidget{
  @override
  _RouteAppState createState() => _RouteAppState();
}

class _RouteAppState extends State<RouteApp>{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => Dashboard(),
        '/login': (context) => Login(),
        '/profile': (context) => Profile() // 补全路由开头的/
      },
    );
  }
}

2. DrawerMenu.dart（移除多余状态更新，调整导航逻辑） #

import 'package:flutter/material.dart';

class DrawerMenu extends StatefulWidget {
  @override
  _DrawerMenuState createState() => _DrawerMenuState();
}

class _DrawerMenuState extends State<DrawerMenu> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text('Mulyawan Sentosa'),
            accountEmail: Text('mulyawan@flazhost.com'),
          ),
          ListTile(
            leading: FlutterLogo(size: 20),
            title: Text('Dashboard'),
            onTap: () {
              // 先关闭抽屉再跳转，用pushReplacement避免栈中重复添加首页
              Navigator.pop(context);
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
          ListTile(
            leading: FlutterLogo(size: 20),
            title: Text('Login'),
            onTap: () {
              Navigator.pop(context);
              Navigator.pushNamed(context, '/login');
            },
          ),
          ListTile(
            leading: FlutterLogo(size: 20),
            title: Text('Profile'),
            onTap: () {
              Navigator.pop(context);
              Navigator.pushReplacementNamed(context, '/profile');
            },
          ),
        ],
      ));
  }
}

3. Login.dart（添加Scaffold统一页面结构） #

import 'package:flutter/material.dart';
import './DrawerMenu.dart'; // 加入抽屉组件，保持页面结构一致

class Login extends StatefulWidget{
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      drawer: DrawerMenu(),
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Container(
        child: Center(child: Text('Halaman Login')),
      ),
    );
  }
}

4. Dashboard.dart和Profile.dart（现有结构无需修改） #

修改说明 #

• 补全路由路径的斜杠后，pushNamed能正确匹配到目标页面。
• 移除setState避免了不必要的组件重建，提升性能。
• 先关闭抽屉再跳转，确保导航上下文正常；用pushReplacementNamed跳转首页和个人中心，避免页面栈堆积重复页面，返回逻辑更符合用户预期。
• 给Login页面添加Scaffold，统一页面结构，同时提供AppBar和返回按钮，完善用户体验。

现在运行代码，抽屉的路由跳转应该能正常工作了！

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