嗨，这个问题我之前也碰到过！默认AppBar之所以能让SafeArea区域也跟着变色，是因为它内部已经帮我们处理了安全区域的背景填充逻辑，但咱们自己用PreferredSize做的自定义AppBar就没这个“自动buff”啦，所以才会出现SafeArea背景和AppBar颜色脱节的情况。

给你分享两个简单的解决办法，按需选就行：

方法一：直接给外层SafeArea设置背景色 #

如果你不想改动自定义AppBar的结构，最简单的方式就是给包裹Scaffold的SafeArea加上和AppBar一样的背景色，这样SafeArea的空白区域就会和AppBar颜色统一啦：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      // 这里设置和AppBar一致的橙色
      backgroundColor: Colors.orange,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(100),
          child: UserSwitcherAppBar(),
        ),
      ),
    );
  }
}

方法二：让自定义AppBar自己管理SafeArea #

要是你想把安全区域的控制逻辑封装到自定义AppBar里，也可以把SafeArea移到UserSwitcherAppBar内部，再用Container的颜色覆盖整个区域：

class UserSwitcherAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 外层Container设置橙色，覆盖包括SafeArea在内的整个区域
    return Container(
      color: Colors.orange,
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 你的用户头像、问候语、用户名组件
            MyUserImage(),
            GreetingText(),
            UserName(),
          ],
        ),
      ),
    );
  }
}

对应的Home组件就可以去掉外层的SafeArea了：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100),
        child: UserSwitcherAppBar(),
      ),
    );
  }
}

这两种方法都能让你的自定义AppBar和默认AppBar一样，实现顶部区域颜色完全统一的效果～

备注：内容来源于stack exchange，提问作者itsji10dra