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(),
                  ),
                )

Answer 1

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

Answer 2

将物理更改为 BouncingScrollPhysics()

Answer 3

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