如何在Material 3设计中将Flutter AppBar设置为纯白色？

在Material 3设计规范下，直接设置backgroundColor无效是因为AppBar默认会应用surface tint效果（一层半透明的色调叠加在背景上），导致白色背景呈现出灰色调。解决这个问题需要同时处理背景色和surface tint：

方法1：单独配置单个AppBar #

在AppBar组件中显式设置backgroundColor为白色，并将surfaceTintColor设为透明，消除叠加的色调：

return Scaffold(
  appBar: AppBar(
    elevation: 20,
    backgroundColor: Colors.white,
    surfaceTintColor: Colors.transparent, // 关键：移除surface tint效果
    title: const Text("你的标题"),
  ),
  body: // 页面内容
);

方法2：全局主题配置 #

如果需要所有AppBar都应用纯白色，可以在ThemeData的AppBarTheme中统一设置：

static ThemeData lightTheme = ThemeData(
  useMaterial3: true,
  brightness: Brightness.light,
  appBarTheme: const AppBarTheme(
    backgroundColor: Colors.white,
    surfaceTintColor: Colors.transparent, // 全局移除surface tint
  ),
);

这样设置后，AppBar就会显示纯净的白色，不会带有默认的灰色调。

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