How to remove scroll glow?

Question

By default, flutter adds a glowing effect on ListView/GridView/... to overscrolls on android phones

I would like to remove this effect entirely or on one specific scrollable. I know that I can change ScrollPhysics to change between Bounce/Clamp. But this doesn't actually remove the glow effect.

What can I do ?

Answer 1

The glow effect comes from GlowingOverscrollIndicator added by ScrollBehavior

To remove this effect, you need to specify a custom ScrollBehavior. For that, simply wrap any given part of your application into a ScrollConfiguration with the desired ScrollBehavior.

The following ScrollBehavior will remove the glow effect entirely :

class MyBehavior extends ScrollBehavior {
  @override
  Widget buildOverscrollIndicator(
      BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

To remove the glow on the whole application, you can add it right under MaterialApp :

MaterialApp(
  builder: (context, child) {
    return ScrollConfiguration(
      behavior: MyBehavior(),
      child: child,
    );
  },
  home: new MyHomePage(),
);

To remove it on a specific ListView, instead wrap only the desired ListView :

ScrollConfiguration(
  behavior: MyBehavior(),
  child: ListView(
    ...
  ),
)

---

This is also valid if you want to change the effect. Like adding a fade when reaching borders of the scroll view.

Answer 2

The glow will disappear by changing the ListView's physics property to BouncingScrollPhysics to imitate the List behavior on iOS.

ListView.builder(
    physics: BouncingScrollPhysics(),
}

Answer 3

The above solution did not work for me. I did this from another solution.

Wrap it with this widget to remove the shadow completely:

NotificationListener<OverscrollIndicatorNotification>(
  onNotification: (overscroll) {
    overscroll.disallowGlow();
  },
  child: new ListView.builder(
    //Your stuff here. 
  ),
),