Flutter顶部导航栏与侧边Drawer颜色不一致问题求助

问题原因 #

在Material 3主题体系下，Drawer组件默认会添加surfaceTintColor（表层色调），即便你显式设置了backgroundColor，这个默认的色调叠加层会修改背景色的视觉呈现，导致它和直接使用primaryContainer的Container出现颜色差异。

解决方案 #

在Drawer的参数中添加surfaceTintColor: Colors.transparent，移除默认的表层色调，让设置的背景色完全显示：

修改后的侧边菜单代码：

@override
Widget build(BuildContext context) {
  return Drawer(
    backgroundColor: Theme.of(context).colorScheme.primaryContainer,
    surfaceTintColor: Colors.transparent, // 新增此行移除默认色调
    elevation: 10,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(0),
        bottomRight: Radius.circular(0),
      ),
    ),
    child: SingleChildScrollView(
        child: Column(children: [
          DrawerHeader(
            padding: EdgeInsets.zero,
            child: Image.asset("lib/images/logo.png",),
          ),
          DrawerListTile(title: "Dashboard", icon: Icons.dashboard, onTap: () => onMemberPressed(0)),
          DrawerListTile(title: "Member", icon: Icons.group, onTap: () => onMemberPressed(1)),
          ...
        ])),
  );
}

额外排查点 #

如果添加上述代码后颜色仍不一致，可检查以下内容：

• 确认Drawer和顶部栏的Container处于同一个Theme作用域内，避免不同context获取到不同的colorScheme配置
• 排查是否有父组件（如SafeArea、嵌套的Theme）对颜色产生额外的覆盖或修改

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