How can I disable the animation when you scroll all the way to the top in ListView.builder

Question

I'm trying to make a list on my flutter app. But, Every time I scroll all the way to the top there is this animation showing up like this:

https://i.stack.imgur.com/Z7mHh.jpg, https://i.stack.imgur.com/EAIyj.jpg

Is there a way to hide this animation?

Andrii Turkovskyi · Accepted Answer · 2018-11-05T13:51:12.540

34

NotificationListener<OverscrollIndicatorNotification>(
    onNotification: (OverscrollIndicatorNotification overscroll) {
      overscroll.disallowGlow();
    },
    child: ListView.builder(...));

As official docs say

GlowingOverscrollIndicator generates OverscrollIndicatorNotification before showing an overscroll indication. To prevent the indicator from showing the indication, call OverscrollIndicatorNotification.disallowGlow on the notification.

edited Nov 05 '18 at 13:51

answered Nov 05 '18 at 12:48

Andrii Turkovskyi

27,554
16
95
105

1

From [official docs](https://api.flutter.dev/flutter/widgets/NotificationListener/onNotification.html): Return true to cancel the notification bubbling. Return false (or null) to allow the notification to continue to be dispatched to further ancestors. – rmalviya Dec 19 '19 at 11:47
i am using SingChildScrollView and Glow Effect Show, then how to remove Glow Effect? can you please add the whole Example Or Git Code? – MohammedAli Jan 23 '20 at 10:14
Did you try to put `SingChildScrollView` instead of `ListView.builder()`? – Andrii Turkovskyi Jan 23 '20 at 11:49
Can it be used somehow when child has `BouncingScrollPhysics()` behavior? – emvaized May 06 '20 at 20:26
Haven't tried that. But if it can't - you can set another scroll physics to child, I guess – Andrii Turkovskyi May 07 '20 at 06:54
now `disallowGlow()` is deprecated. I replaced by `disallowIndicator()` – Ovidiu Uşvat Sep 05 '22 at 12:00

score 27 · Answer 2 · answered Jan 08 '20 at 06:26

27

This will help you just add this in your Listview.builder

physics: ClampingScrollPhysics(),

answered Jan 08 '20 at 06:26

Muhammad Asim Nawaz

281
3
2

Any solution for `ScrollablePositionedList.builder`? Kindly share. Thanks. – Kamlesh Jun 23 '21 at 13:34

score 15 · Answer 3 · edited Dec 08 '20 at 19:00

15

You can solve this problem using two methods.

if you can afford bounce back effect then simply use ListView.builder's property physics and set value BouncingScrollPhysics() like this:
```
physics: BouncingScrollPhysics()
```
you can also solve it using ScrollConfiguration and custom ScrollBehavior.

See for this post for details.

edited Dec 08 '20 at 19:00

romellem

5,792
1
32
64

answered Nov 05 '18 at 12:05

Viren V Varasadiya

25,492
9
45
61

1

`physics: BouncingScrollPhysics()` solution does not work with `ScrollablePositionedList.builder`. Any solution. Thanks. – Kamlesh Jun 23 '21 at 13:33

Md. Tahmid Mozaffar · Answer 4 · 2020-04-15T10:39:09.817

3

MD Khali , Here is the code using SingleChildScrollView

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: NotificationListener<OverscrollIndicatorNotification>(
      onNotification: (OverscrollIndicatorNotification overScroll) {
        overScroll.disallowGlow();
        return false;
      },
      child: SingleChildScrollView( ..... )
    )
  )
 )

edited Apr 15 '20 at 10:39

answered Apr 15 '20 at 06:35

Md. Tahmid Mozaffar

975
10
17

That is best solution worked for me, thanks – Ahmad Darwesh Jan 14 '21 at 14:28
How can we use it with `ScrollablePositionedList.builder` kindly suggest. thanks. – Kamlesh Jun 23 '21 at 13:34

score 0 · Answer 5 · answered Jan 15 '23 at 19:16

0

You should try this, it helped me

const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())

https://api.flutter.dev/flutter/widgets/BouncingScrollPhysics-class.html

answered Jan 15 '23 at 19:16

Aygün Özdemir

11
2

score 0 · Answer 6 · answered Jul 19 '23 at 17:57

to disable glow effect of ClampingScrollPhysics which is the default behavior for Android you can use scrollBehavior property of MaterialApp

    return MaterialApp.router(
      scrollBehavior: _ScrollBehaviourWithoutGlowEffect(),
...............



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

How can I disable the animation when you scroll all the way to the top in ListView.builder

6 Answers6

Linked