滚动时动态修改SliverAppBar或AppBar背景颜色的实现问题

完全可以实现该效果，核心逻辑是监听页面滚动偏移量，根据滚动距离占预设阈值的比例动态计算AppBar背景色的透明度即可，以下分两种常用场景给出可直接运行的示例代码：

场景1：普通AppBar配合可滚动组件实现 #

使用ScrollController监听滚动位置，动态更新AppBar的backgroundColor属性：

import 'package:flutter/material.dart';

class GradientAppBarPage extends StatefulWidget {
  const GradientAppBarPage({super.key});

  @override
  State<GradientAppBarPage> createState() => _GradientAppBarPageState();
}

class _GradientAppBarPageState extends State<GradientAppBarPage> {
  final ScrollController _scrollController = ScrollController();
  // 完全变为纯色的滚动阈值，可根据实际需求调整
  final double _threshold = 200;
  double _appBarOpacity = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      double offset = _scrollController.offset;
      setState(() {
        // 透明度限制在0~1区间
        _appBarOpacity = (offset / _threshold).clamp(0, 1);
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true, // 让页面内容延伸到AppBar下方，初始透明时效果正常
      appBar: AppBar(
        backgroundColor: Colors.blue.withOpacity(_appBarOpacity),
        elevation: 0, // 去掉默认阴影，透明状态下更自然
        title: const Text('渐变AppBar'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        padding: EdgeInsets.zero,
        itemCount: 50,
        itemBuilder: (context, index) {
          if (index == 0) {
            // 顶部占位区域，对应初始透明AppBar下方的内容
            return Container(height: 200, color: Colors.grey[200], child: const Center(child: Text('顶部Banner区域')));
          }
          return ListTile(title: Text('列表项 $index'));
        },
      ),
    );
  }
}

场景2：SliverAppBar配合CustomScrollView实现 #

用NotificationListener监听滚动通知，无需额外定义ScrollController即可实现效果：

import 'package:flutter/material.dart';

class GradientSliverAppBarPage extends StatefulWidget {
  const GradientSliverAppBarPage({super.key});

  @override
  State<GradientSliverAppBarPage> createState() => _GradientSliverAppBarPageState();
}

class _GradientSliverAppBarPageState extends State<GradientSliverAppBarPage> {
  final double _threshold = 200;
  double _appBarOpacity = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NotificationListener<ScrollUpdateNotification>(
        onNotification: (notification) {
          double offset = notification.metrics.pixels;
          setState(() {
            _appBarOpacity = (offset / _threshold).clamp(0, 1);
          });
          return false;
        },
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              pinned: true, // 固定在顶部
              expandedHeight: 200,
              backgroundColor: Colors.blue.withOpacity(_appBarOpacity),
              elevation: 0,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(color: Colors.grey[200], child: const Center(child: Text('顶部Banner区域'))),
              ),
              title: const Text('渐变SliverAppBar'),
            ),
            SliverList.builder(
              itemCount: 50,
              itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
            )
          ],
        ),
      ),
    );
  }
}

注意事项 #

• 阈值_threshold可以根据你的顶部内容高度自定义调整，比如顶部轮播高度为300，就将阈值设为300，即可实现滚动完轮播时AppBar刚好完全变为纯色
• 可根据需求修改backgroundColor的目标色值，透明度逻辑保持不变即可
• 如果对性能要求更高，可以用ValueNotifier存储透明度值配合ValueListenableBuilder更新，避免整页setState

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