Flutter设置AppBar与body同色却显示偏深，如何实现无AppBar视觉效果

开发者阿泽

2026-10-5

问题原因

这个问题通常由两个配置缺失导致：

Flutter中Scaffold组件默认读取的页面背景色是ThemeData的scaffoldBackgroundColor属性，你当前只配置了旧版的backgroundColor，没有配置scaffoldBackgroundColor，导致body实际背景色和你预期的颜色不一致。
Flutter 3.x默认启用Material 3设计规范，AppBar默认携带的surfaceTintColor属性会在背景色上叠加一层主色调蒙层，哪怕设置了elevation为0也会导致颜色和body出现视觉差异。

解决步骤

1. 全局主题配置（推荐）

直接修改MaterialApp的ThemeData配置，一次性全局生效，不用每个页面单独设置：

class MyApp extends StatelessWidget {
  const MyApp();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppName',
      theme: ThemeData(
        // 配置Scaffold默认背景色，body会自动读取这个属性
        scaffoldBackgroundColor: Color(pagesBackgroundColor),
        appBarTheme: AppBarTheme(
          backgroundColor: Color(pagesBackgroundColor),
          elevation: 0,
          // 关闭Material3默认的色调叠加效果
          surfaceTintColor: Colors.transparent,
        ),
      ),
      home: const HomePage(),
    );
  }
}

2. 页面AppBar配置

全局配置完成后，页面内的AppBar可以删掉重复的backgroundColor、elevation属性，简化代码：

class HomePage extends StatelessWidget {
  const HomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "What's up!",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Column(),
    );
  }
}

如果需要单独给某个页面的AppBar做配置，单独给该AppBar加上surfaceTintColor: Colors.transparent属性即可。