How to remove scroll glow in flutter?




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.


Or 


You don't need to build your own custom ScrollBehavior class. Instead, just wrap your scrollable widget in a ScrollConfiguration widget and set the behavior property to:

const ScrollBehavior().copyWith(overscroll: false).

Full code example:

ScrollConfiguration(
  behavior: const ScrollBehavior().copyWith(overscroll: false),
  child: PageView(
    physics: const PageScrollPhysics(),
    controller: model.pageController,
    children: [
      PageOne(),
      PageTwo(),
      PageThree(),
      PageFour(),
    ],
  ),
),
  

Post a Comment

Previous Post Next Post

Subscribe Us


Get tutorials, Flutter news and other exclusive content delivered to your inbox. Join 1000+ growth-oriented Flutter developers subscribed to the newsletter

100% value, 0% spam. Unsubscribe anytime