Flutter应用导航抽屉点击Settings按钮无法跳转至设置页问题

出现的错误 #

• 错误1：Invalid constant value.
• 错误2：The values in a const list literal must be constants. Try removing the keyword 'const' from the list literal.

错误集中在HomePage导航抽屉的Navigator.pushNamed(context, '/settingspage')代码行。

问题代码 #

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:my_app/global/common/toast.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("SALARY CALCULATOR"),
          centerTitle: true,
        ),
        drawer: const Drawer(
          backgroundColor: Color.fromARGB(255, 22, 116, 192),
          child: Column(
            children: [
              DrawerHeader(
                child: Icon(
                  Icons.wallet,
                  color: Colors.white,
                  size: 45,
                ),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('S E T T I N G S'),
                onTap: () {
                  Navigator.pushNamed(context, '/settingspage');
                }, 
              )
            ],
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 30),
            GestureDetector(
              onTap: () {
                FirebaseAuth.instance.signOut();
                Navigator.pushNamed(context, "/login");
                showToast(message: "Successfully signed out");
              },
              child: Container(
                height: 45,
                width: 100,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Center(
                  child: Text(
                    "Sign out",
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
            )
          ],
        ));
  }
}

问题原因 #

1. 常量错误：你给Drawer添加了const修饰符，但Drawer内部ListTile的onTap回调是动态函数——Navigator.pushNamed依赖context，而context并非编译时常量，无法放入const组件树中。
2. 跳转失败：即使修复常量错误，若main.dart未正确注册/settingspage路由，按钮点击也无法触发页面跳转。

修复步骤 #

1. 移除Drawer的const修饰符 #

将drawer: const Drawer(改为drawer: Drawer(，内部子组件如DrawerHeader、Icon的const可保留（不影响功能）。

2. 确认路由注册 #

打开main.dart，确保MaterialApp的routes配置中包含/settingspage：

MaterialApp(
  initialRoute: '/login',
  routes: {
    '/login': (context) => const LoginPage(),
    '/home': (context) => const HomePage(),
    '/settingspage': (context) => const SettingsPage(), // 必须添加该路由
  },
);

修复后的HomePage核心代码片段 #

// ...其他代码不变
drawer: Drawer(
  backgroundColor: const Color.fromARGB(255, 22, 116, 192),
  child: Column(
    children: const [
      DrawerHeader(
        child: Icon(
          Icons.wallet,
          color: Colors.white,
          size: 45,
        ),
      ),
      ListTile(
        leading: Icon(Icons.settings),
        title: Text('S E T T I N G S'),
        onTap: () {
          Navigator.pushNamed(context, '/settingspage');
        }, 
      )
    ],
  ),
),
// ...其他代码不变

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