如何修改或移除CustomScrollView的滚动边缘颜色？

一、直接移除边缘提示效果 #

有两种实用方案：

1. 局部禁用（仅针对当前CustomScrollView） #

用ScrollConfiguration包裹目标组件，替换默认滚动行为：

Scaffold(
  body: ScrollConfiguration(
    behavior: ScrollConfiguration.of(context).copyWith(
      overscroll: false, // 关闭过度滚动的边缘提示
    ),
    child: CustomScrollView(
      slivers: [
        // 你的sliver组件内容
        SliverToBoxAdapter(
          child: Container(
            decoration: const BoxDecoration(
                color: Color(0xff50D2B6),
                borderRadius: BorderRadius.vertical(bottom: Radius.circular(20))
            ),
            width: MediaQuery.of(context).size.width,
            height: 100,
            child: const Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: EdgeInsets.fromLTRB(0, 0, 0, 20),
                child: Text('INFO APP', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40, color: Colors.white),),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

2. 全局禁用（整个APP生效） #

在MaterialApp的主题配置中统一关闭：

MaterialApp(
  theme: ThemeData(
    scrollBehavior: const MaterialScrollBehavior().copyWith(overscroll: false),
  ),
  home: YourHomePage(),
);

二、修改边缘提示的颜色 #

如果需要保留提示效果但自定义颜色，可通过以下方式实现：

1. 局部修改颜色 #

自定义ScrollBehavior并重写过度滚动指示器的颜色：

class CustomGlowScrollBehavior extends ScrollBehavior {
  final Color glowColor;

  CustomGlowScrollBehavior(this.glowColor);

  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
    return GlowingOverscrollIndicator(
      axisDirection: details.direction,
      color: glowColor, // 设置自定义颜色
      child: child,
    );
  }
}

// 使用示例
Scaffold(
  body: ScrollConfiguration(
    behavior: CustomGlowScrollBehavior(const Color(0xff50D2B6)), // 替换为你需要的颜色
    child: CustomScrollView(
      slivers: [
        // 你的sliver组件内容
      ],
    ),
  ),
);

2. 全局修改颜色 #

通过主题的colorScheme或scrollbarTheme统一配置：

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.white).copyWith(
      secondary: const Color(0xff50D2B6), // 此颜色会作为默认的过度滚动提示色
    ),
    // 也可通过scrollbarTheme更明确设置
    scrollbarTheme: ScrollbarThemeData(
      overscrollIndicatorColor: MaterialStateProperty.all(const Color(0xff50D2B6)),
    ),
  ),
  home: YourHomePage(),
);

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