Flutter使用ListView.separated滚动时列表项出现蓝色效果如何解决？

问题原因 #

• 你禁用的是旧版安卓系统的滚动越界发光效果（GlowOverscrollIndicator），安卓12及以上系统默认使用拉伸越界效果（StretchOverscrollIndicator），该效果的默认颜色取自主题的colorScheme.primary属性
• Flutter 3.0+版本后，旧的primaryColor等主题属性优先级低于colorScheme配置，你仅设置了旧版主题属性，没有修改colorScheme，系统默认的蓝色主色依然生效，滚动时就会出现在列表项边缘。

解决方案 #

可按需选择以下任意方案：

方案1：全局禁用所有越界滚动效果（最彻底） #

自定义滚动行为，完全移除滚动越界的所有默认效果，修改MaterialApp配置即可：

// 定义无越界效果的滚动行为
class NoOverscrollBehavior extends ScrollBehavior {
  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

// 配置到MaterialApp中
MaterialApp(
  scrollBehavior: NoOverscrollBehavior(),
  theme: ThemeData(
    // 原有配置保留，补充colorScheme覆盖默认蓝色
    colorScheme: ColorScheme.dark(
      primary: backgroundColor[0],
    ),
    // 可选：全局禁用默认水波纹、高亮色，避免其他场景出现默认蓝色
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  // 其余原有配置保持不变
)

方案2：仅修改主题色，保留越界效果 #

如果需要保留越界拉伸效果，仅把效果颜色替换为你的主题色，补全ThemeData的colorScheme配置即可：

theme: ThemeData(
  brightness: Brightness.dark,
  primaryColor: backgroundColor[0],
  // 新增colorScheme配置
  colorScheme: ColorScheme.dark(
    primary: backgroundColor[0], // 把默认蓝色替换为你的主题色
  ),
  // 其余原有配置保持不变
)

方案3：仅在当前列表页面生效 #

如果不想修改全局配置，给当前页面的ListView外层套一层Theme组件覆盖局部配置即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: themeBgColor,
    appBar: AppBar(...),
    body: SafeArea(
      child: Theme(
        data: Theme.of(context).copyWith(
          colorScheme: Theme.of(context).colorScheme.copyWith(
            primary: backgroundColor[0],
          ),
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: NotificationListener<OverscrollIndicatorNotification>(
          onNotification: (overScroll){
            overScroll.disallowGlow();
            return true;
          },
          child: ListView.separated(
            // 原有ListView配置保持不变
            physics: ClampingScrollPhysics(),
            clipBehavior: Clip.none,
            itemBuilder: (_, __) {
              return Container(
                height: 30,
                color: bgContainerColor,
                child: Text("aaaaaaaaa"),
              );
            },
            separatorBuilder: (_, __) {
              return SizedBox(height: 10);
            },
            itemCount: 100
          ),
        ),
      ),
    ),
  );
}

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