初学Flutter：如何为panel-dashboard项目配置抽屉导航路由？

1. 先创建目标页面组件 #

先定义几个你需要跳转的页面，比如：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: const Center(child: Text('首页内容'))
    );
  }
}

class OrdersPage extends StatelessWidget {
  const OrdersPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('订单页')),
      body: const Center(child: Text('订单内容'))
    );
  }
}

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置页')),
      body: const Center(child: Text('设置内容'))
    );
  }
}

2. 在MaterialApp中配置路由表 #

找到项目里的MaterialApp组件（通常在main.dart或widget_tree.dart中），添加routes参数绑定页面和路由名称：

MaterialApp(
  title: 'Dashboard',
  theme: ThemeData(...),
  // 配置路由映射表
  routes: {
    '/': (context) => const HomePage(), // 默认根路由
    '/orders': (context) => const OrdersPage(),
    '/settings': (context) => const SettingsPage(),
  },
  initialRoute: '/', // 用这个代替home属性，更规范
)

3. 修改Drawer中ListTile的跳转逻辑 #

针对你提到的widget_tree.dart第72行的Drawer ListTile，给每个选项添加onTap回调，完成跳转同时关闭Drawer：

ListTile(
  leading: const Icon(Icons.home),
  title: const Text('首页'),
  onTap: () {
    Navigator.pop(context); // 先关闭Drawer
    Navigator.pushNamed(context, '/'); // 跳转到首页
  },
),
ListTile(
  leading: const Icon(Icons.shopping_cart),
  title: const Text('订单'),
  onTap: () {
    Navigator.pop(context);
    Navigator.pushNamed(context, '/orders');
  },
),
ListTile(
  leading: const Icon(Icons.settings),
  title: const Text('设置'),
  onTap: () {
    Navigator.pop(context);
    Navigator.pushNamed(context, '/settings');
  },
),

额外提示 #

• 如果需要传递参数，可使用Navigator.pushNamed(context, '/routeName', arguments: 你的参数)，目标页面通过ModalRoute.of(context)?.settings.arguments获取。
• 若要替换当前页面栈（比如登录后跳首页不允许返回），可以用Navigator.pushReplacementNamed替代pushNamed。

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