Flutter：如何让Material3主题的FlexibleSpaceBar滚动时渐变为AppBar颜色

核心思路 #

问题根源是Hero图的渐变固定为白色，而Material3规范中AppBar滚动时会从初始色过渡到页面背景色的亮饱和版本（通常是colorScheme.surfaceTint叠加在surface色上）。我们需要让Hero图的渐变颜色与AppBar的动态滚动颜色同步，而非固定白色。

具体实现步骤 #

1. 获取AppBar滚动后的目标颜色
   Material3中，完全收起的AppBar颜色可通过主题colorScheme计算得出：

final colorScheme = Theme.of(context).colorScheme;
final scrolledAppBarColor = Color.alphaBlend(
  colorScheme.surfaceTint.withOpacity(1.0),
  colorScheme.surface,
);

2. 自定义FlexibleSpaceBar背景，添加动态渐变层
   将原有Hero图片组件包裹在Stack中，底部添加一个渐变层，该层的透明度随滚动进度变化，从完全透明过渡到不透明，颜色使用上述计算出的scrolledAppBarColor。

3. 监听滚动进度，控制渐变透明度
   通过滚动控制器监听NestedScrollView的偏移量，计算AppBar的展开/收起进度（0为完全展开，1为完全收起），以此控制渐变层的透明度。

修改后的完整代码 #

第一步：添加滚动控制器与进度监听

// 在State类中定义变量
late final ScrollController _scrollController;
double _scrollProgress = 0.0;

@override
void initState() {
  super.initState();
  _scrollController = ScrollController();
  _scrollController.addListener(_updateScrollProgress);
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

void _updateScrollProgress() {
  final expandedHeight = (widget.neighbour.picUrl ?? "") != ""
      ? (MediaQuery.of(context).size.width * 4/3) : 256;
  // 计算滚动进度，限制在0-1之间
  _scrollProgress = (_scrollController.offset / (expandedHeight - kToolbarHeight)).clamp(0.0, 1.0);
  setState(() {});
}

第二步：构建带动态渐变的Hero背景

Widget buildHeroBackground() {
  final colorScheme = Theme.of(context).colorScheme;
  final scrolledAppBarColor = Color.alphaBlend(
    colorScheme.surfaceTint.withOpacity(1.0),
    colorScheme.surface,
  );

  return Stack(
    fit: StackFit.expand,
    children: [
      // 原有的Hero图片组件
      profilePicWidget,
      // 随滚动变化的渐变层
      Positioned.fill(
        child: Opacity(
          opacity: _scrollProgress,
          child: Container(
            color: scrolledAppBarColor,
          ),
        ),
      ),
    ],
  );
}

第三步：更新NestedScrollView与SliverAppBar

return NestedScrollView(
  controller: _scrollController, // 绑定滚动控制器
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        expandedHeight: (widget.neighbour.picUrl ?? "") != ""
            ? (MediaQuery.of(context).size.width * 4/3) : 256,
        automaticallyImplyLeading: false,
        flexibleSpace: FlexibleSpaceBar(
          background: buildHeroBackground(), // 使用自定义背景
          title: Text(widget.neighbour.firstName ??
              widget.neighbour.surname ??
              ""),
        ),
      ),
    ];
  },
  body: Theme(
    data: Theme.of(context),
    child: ListView(children: [
      // 原有body内容
    ]),
  ),
);

额外优化（可选） #

若希望渐变效果更自然，可将纯色容器替换为线性渐变：

Positioned.fill(
  child: Opacity(
    opacity: _scrollProgress,
    child: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            scrolledAppBarColor,
            scrolledAppBarColor.withOpacity(0.0),
          ],
        ),
      ),
    ),
  ),
);

修改完成后，Hero图的渐变颜色会完全匹配Material3规范下AppBar滚动后的颜色，解决白色窗口的衔接问题。

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