如何解决Flutter中滚动页面时AppBar背景色变化的问题？

问题成因 #

• AppBar的flexibleSpace触发默认滚动样式：SearchBarWidget的AppBar中使用了flexibleSpace，这会激活Material Design中AppBar的滚动联动逻辑——即使你设置了固定的backgroundColor: Colors.white，滚动时AppBar仍会默认调整背景的透明度或样式，导致视觉上的颜色变化。
• 滚动通知被拦截导致状态异常：CommunityScreen里的NotificationListener<ScrollNotification>返回true，会完全拦截滚动通知，阻止AppBar接收滚动状态信息，进而加剧背景色的异常波动。

解决方案 #

方案1：移除flexibleSpace（非必要时） #

如果SafeArea可以直接嵌套在AppBar的title或其他属性中，直接去掉flexibleSpace即可消除滚动联动效果：

class _SearchBarWidgetState extends State<SearchBarWidget> {
  @override
  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;
    return AppBar(
      automaticallyImplyLeading: false,
      toolbarHeight: 70,
      backgroundColor: Colors.white,
      elevation: 0,
      // 将原flexibleSpace内的内容移至title中
      title: SafeArea(
        child: ... // 原flexibleSpace里的组件
      ),
    );
  }
}

方案2：强制关闭AppBar的滚动样式变化 #

若必须保留flexibleSpace，可通过forceMaterialTransparency属性强制禁用Material Design的滚动背景动态效果：

return AppBar(
  automaticallyImplyLeading: false,
  toolbarHeight: 70,
  backgroundColor: Colors.white,
  elevation: 0,
  forceMaterialTransparency: true, // 新增该行关闭滚动联动样式
  flexibleSpace: SafeArea(
    ... // 原有内容
  ),
);

方案3：修正滚动通知的拦截逻辑 #

NotificationListener返回true会阻断所有滚动通知传递，应仅处理需要的逻辑并返回false，让通知能传递给AppBar：

body: NotificationListener<ScrollNotification>(
  onNotification: (scrollNotification) {
    // 仅处理特定类型的滚动通知，比如滚动结束事件
    if (scrollNotification is ScrollEndNotification) {
      // 你的业务逻辑
    }
    return false; // 允许通知继续向上传递
  },
  child: ListView(
    ... // 原有列表内容
  ),
),

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