Flutter中如何修改ListView滚动边界拖拽水波纹动画的颜色

滚动到列表末尾继续拖拽出现的半圆形水波纹，是Material组件库默认的GlowingOverscrollIndicator溢出提示效果，可通过两种方式修改它的颜色：

全局生效配置 #

直接修改应用根主题的配色，修改后应用内所有ListView、GridView等可滚动组件的溢出波纹都会使用该颜色：

MaterialApp(
  theme: ThemeData(
    // Flutter 3.0+ 版本推荐通过colorScheme配置
    colorScheme: ColorScheme.light(
      secondary: Colors.deepPurple, // 此处颜色即为水波纹显示色
    ),
    // 旧版本Flutter可直接配置accentColor
    // accentColor: Colors.deepPurple,
  ),
  home: const YourHomePage(),
)

单组件局部生效配置 #

如果只需要修改某一个列表的水波纹颜色，不需要改动全局主题，可通过ScrollConfiguration包裹目标列表实现：

• 高版本Flutter（3.10+）可直接复制现有滚动行为修改颜色：

ScrollConfiguration(
  behavior: MaterialScrollBehavior().copyWith(
    overscrollColor: Colors.amber, // 自定义水波纹颜色
  ),
  child: ListView.builder(
    itemCount: 15,
    itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
  ),
)

• 低版本Flutter可通过自定义ScrollBehavior重写指示器构建逻辑实现：

class CustomColorScrollBehavior extends MaterialScrollBehavior {
  final Color indicatorColor;
  const CustomColorScrollBehavior({required this.indicatorColor});

  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
    return GlowingOverscrollIndicator(
      axisDirection: details.direction,
      color: indicatorColor,
      child: child,
    );
  }
}

// 使用方式
ScrollConfiguration(
  behavior: const CustomColorScrollBehavior(indicatorColor: Colors.teal),
  child: ListView(/* 列表参数 */),
)

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