Flutter Material3下App Bar背景变白无颜色问题咨询

在Material 3的设计规范里，默认的Small Top AppBar（也就是你使用的普通AppBar）默认采用colorScheme.surface作为背景色——在浅色主题下这个颜色就是白色。你设置的colorSchemeSeed确实会生成完整的色彩体系，但默认的AppBar样式并未关联到primary主题色，所以才会显示纯白背景。

有三种常用处理方式，按需选择：

1. 单独给当前AppBar设置主题色背景 #

直接在AppBar组件内指定背景色和文字颜色，确保色彩对比度：

appBar: AppBar(
  title: Text(widget.title),
  backgroundColor: Theme.of(context).colorScheme.primary,
  foregroundColor: Theme.of(context).colorScheme.onPrimary, // 文字、图标自动适配主题色对比度
),

2. 全局配置所有AppBar的样式 #

如果希望整个应用的AppBar统一使用主题色背景，在ThemeData中配置appBarTheme：

theme: ThemeData(
  colorSchemeSeed: Colors.red,
  useMaterial3: true,
  appBarTheme: AppBarTheme(
    backgroundColor: ThemeData(colorSchemeSeed: Colors.red, useMaterial3: true).colorScheme.primary,
    foregroundColor: ThemeData(colorSchemeSeed: Colors.red, useMaterial3: true).colorScheme.onPrimary,
  ),
),

3. 遵循Material3设计规范添加主题色淡色覆盖 #

若想保留Material3默认的surface白色背景，仅给AppBar添加一层主题色的淡色覆盖，设置surfaceTintColor即可：

appBar: AppBar(
  title: Text(widget.title),
  surfaceTintColor: Theme.of(context).colorScheme.primary,
),

这种方式既符合Material3的设计语言，又能体现主题色调。

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