Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter How to remove overscroll effect from ListView [duplicate]

Tags:

flutter

dart

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 ?

enter image description here

like image 949
Rémi Rousselet Avatar asked Nov 18 '22 11:11

Rémi Rousselet


2 Answers

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.

like image 90
Rémi Rousselet Avatar answered Dec 23 '22 19:12

Rémi Rousselet


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

ListView.builder(
    physics: BouncingScrollPhysics(),
}
like image 37
Eddy Liu Avatar answered Dec 23 '22 18:12

Eddy Liu