How to remove blue/grey scroll animation of tabbarview in Flutter?

Question

I have a TabBarview when slide from one page to another splash appear in the very side of the page. I don't want the splash highlight to appear on both sides.

Although tabbarview has physics and when set to bouncingscrollphysics() this shape shouldnt appear, like what occur in list view, but nothing changed.

Tried another solution: I wrapped the tabbarview with a theme and changed the highlight color and splash color to colors.transparent but that didn't work either. Here is the code for my TabBarview. and here is the ui, and how it looks.

 Theme(
                  data: new ThemeData(
                      splashColor: Colors.transparent,
                      highlightColor: Colors.transparent),
                  child: TabBarView(
                    physics: BouncingScrollPhysics(),
                    controller: _controller,
                    children: model.types.map((String type) {
                      List<Subscription> subssOfThisType =
                          model.historySubscription.where((Subscription sub) {
                        return sub.package.name == type;
                      }).toList();

                      final cards = subssOfThisType.map(
                        (s) {
                          return HistoryCard(
                            sub: s,
                          );
                        },
                      ).toList();

                      return ListView(
                        physics: BouncingScrollPhysics(),
                        padding:
                            EdgeInsets.symmetric(horizontal: 14, vertical: 8),
                        children: cards ?? Container(),
                      );
                    }).toList(),
                  ),
                )

Mohit Shetty · Accepted Answer · 2019-08-29T16:06:32.037

3

If you don't want to make some breaking changes in the original code of TabBar hten use the below package

https://pub.dev/packages/flutter_tab_bar_no_ripple

=== For your use case ===

To keep things simple ... change physics to BouncingScrollPhysics()

If you don't want that bouncy effect then check the link below

https://stackoverflow.com/a/51119796/10104608

edited Aug 29 '19 at 16:06

answered Aug 29 '19 at 15:23

Mohit Shetty

1,551
8
26

this is what I did , you can find the edit above. However , it doesnot work – Aya Elsisy Aug 29 '19 at 15:26
which attribute will be set in material widget ? – Aya Elsisy Aug 29 '19 at 15:32
unfortunately it wouldn't work with me as I need the on tap function in the original Tab Bar – Aya Elsisy Aug 29 '19 at 15:43
Try using the controller it provides...if it suits your need. – Mohit Shetty Aug 29 '19 at 15:44
you mean a controller in the tab bar view ? – Aya Elsisy Aug 29 '19 at 15:45
Yes...Please describe your issue if possible so that I can provide an appropriate solution – Mohit Shetty Aug 29 '19 at 15:49
Wait a sec...Are you referring to the blue scrollanimation? – Mohit Shetty Aug 29 '19 at 16:01
yess this what I am referring to the blue scroll animation "this splash" – Aya Elsisy Aug 29 '19 at 16:03
See from what that overscroll glow appears and change its physics to BouncingScrollPhysics() – Mohit Shetty Aug 29 '19 at 16:09
yes yes I have used physics to BouncingScrollPhysics() but it didnt work . However the link you added helped in removing this blue scroll animation thank you lots – Aya Elsisy Aug 29 '19 at 16:14
Glad it helped you...I doubt that overscroll glow is coming from somewhere else – Mohit Shetty Aug 29 '19 at 16:19

score 1 · Answer 2 · answered Sep 18 '20 at 10:14

1

change physics to BouncingScrollPhysics()

answered Sep 18 '20 at 10:14

joe zhang

21
2

score 1 · Answer 3 · answered Mar 28 '21 at 06:33

Would you like to try ScrollConfiguration?

it works fine.

body: ScrollConfiguration(
  behavior: MyBehavior(),
  child: const TabBarView(
    children: [
      TabPage(icon: Icons.directions_car),
      TabPage(icon: Icons.directions_bike),
    ],
  ),
),

class MyBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    return child;
  }
}

https://stackoverflow.com/a/51119796/9819094

How to remove blue/grey scroll animation of tabbarview in Flutter?

3 Answers3