Animation duration of a flutter TabBarView

Question

In Flutter I have the following issue.

I want to control the animation speed (transition duration) of a TabBarView. The content body is sliding from left to right during a TabBar click. I want this to be instantaneous. Very similar to the Twitter app with its main TabBar icon at the bottom.

Is there a way to control the animation (duration) of the TabVarView?

Answer 1

You can't do it direclty with a TabBar! You should create a CustomTab and add an 'Inkwell' on it. You should set the onTap parameter of the inkwell to :

() = tabController.animateTo(0, duration: Duration(milliseconds: 0));'

So it should look like that

Widget _buildTabItem({
  int index,
  ValueChanged<int> onPressed,
}) {
  return Expanded(
    child: Container(
      child: Material(
        type: MaterialType.transparency,
        child: InkWell(
          onTap: () => onPressed(index),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              /// Icon and text here
            ],
          ),
        ),
      ),
    ),
  );
}

Answer 2

You can control the general physics of the scroll animation.

TabBarView(
  physics: CustomTabBarViewScrollPhysics(),
            

Control the scroll behavior:

class CustomTabBarViewScrollPhysics extends ScrollPhysics {
  const CustomTabBarViewScrollPhysics({ScrollPhysics? parent})
      : super(parent: parent);

  @override
  CustomTabBarViewScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return CustomTabBarViewScrollPhysics(parent: buildParent(ancestor)!);
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 50,
        stiffness: 100,
        damping: 0.8,
      );
}

You should also be able to calculate the duration with mass, stiffness, damping, but I believe having those options is even better suited for your problem. Source