如何为SliverAppBar添加BackdropFilter实现背景模糊效果

核心思路是将BackdropFilter放在SliverAppBar的flexibleSpace的底层，保证上层的title、actions不会被模糊效果影响，同时背景可以捕获下层滚动内容做模糊计算。

核心实现代码 #

import 'dart:ui';
import 'package:flutter/material.dart';

// 放在CustomScrollView或者NestedScrollView的slivers数组中
SliverAppBar(
  pinned: true,
  floating: true,
  // 必须设置背景透明，否则默认的AppBar背景色会遮挡下层滚动内容，导致模糊无效果
  backgroundColor: Colors.transparent,
  elevation: 0,
  // 原有title和actions完全不受影响
  title: const Text('App Library'),
  actions: [
    IconButton(onPressed: () {}, icon: const Icon(Icons.more_horiz)),
  ],
  flexibleSpace: Stack(
    children: [
      // 毛玻璃背景层，放在最底部
      Positioned.fill(
        child: BackdropFilter(
          // 模糊度可根据需求调整，iOS原生效果建议设置8-12
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(
            // 半透底色模拟iOS毛玻璃的磨砂质感，浅色模式用白色半透，深色模式用黑色半透即可
            color: Colors.white.withOpacity(0.2),
          ),
        ),
      ),
      // 保留原FlexibleSpaceBar的功能，不需要渐变效果可删除
      const FlexibleSpaceBar(),
    ],
  ),
)

注意事项 #

• 要保证SliverAppBar的层级在滚动列表的上层，滚动内容从AppBar下方穿过时，模糊效果才会正常显示
• 如果需要实现滚动时模糊度渐变的交互，可绑定ScrollController监听滚动偏移量，动态修改sigmaX、sigmaY的值和背景容器的透明度，偏移量越大模糊度越高，和iOS原生交互逻辑对齐
• 不要直接把BackdropFilter放在SliverAppBar的title层级或者外层，否则会把文字和按钮也一起模糊

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