Flutter: How to Remove Scroll Glow? (Solution with Example)

Flutter use widgets to show content with different style and presentation of material design.

Some material design widgets (CustomScrollView, GridView, ListView, NestedScrollView, PageView, SinglechildScrollview) have scrolling for their children.

When a user scrolls downward or upward in any scrolling widget, he notices the glow or color splash effect when he over-scrolls (try to go down or upward when he is at the bottom or the top of the scrolling view).

A developer can have different reasons to remove this glow effect inside the scrolling widget. Your design may have this requirement to hide the scroll glow or splash.

Now the question is how you will remove this effect.

Solution: Use NotificationListener

For me, NotificationListener widget is the best solution to fix this glow style.

According to the docs

NotificationListener widget is

A widget that listens for Notifications bubbling up the tree.

All scrolling Widgets dispatch (send) OverscrollIndicatorNotification objects up to the widget tree.

These (OverscrollIndicatorNotification objects) move up to the widget tree unless they are handled by the NotificationListener widget with the specification of a generic type of OverscrollIndicatorNotification.

NotificationListener widget has onNotification callback which we use to catch the notifications and do some operations.

In the current example, we catch the OverscrollIndicatorNotification object as over-scroll and apply the disallowGlow() method.

This will remove the glow or splash effect from the material of the Cupertino scrolling widget.


        onNotification: (overScroll) {
child: //Your scrolling widget goes here(like ListView)

For a more interesting debate on removing the scroll indicator in flutter check this StackOverflow.


You can easily remove the scroll glow. And it is the time to learn about these:


Hussain Humdani

Hussain Humdani

while ( ! ( succeed = try() ) );