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 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.

Remove Overscroll Glow Example with NotificationListener Widget

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 overscroll and apply the disallowGlow() method.

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

NotificationListener<OverscrollIndicatorNotification>(
        onNotification: (overScroll) {
          overScroll.disallowGlow();
          return;
        },
child: //Your scrolling widget goes here(like ListView)
);