i want to change the animation duration and curve of the indicator to easeOutBack like the imag below:

any suggestion please. and thanks.

the code im working on

void initState() {
    _tabController = TabController(
      length: 3,
      vsync: this,)..addListener(() {
        setState(() {
          _selectedIndex = _tabController.index;
        });
      });
    super.initState();
  }



    Container(
                  height: 57.35,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(28.67),
                  ),
                  child: TabBar(
                    onTap: (index) {
                      _selectedIndex = index;
                    },
                    padding: EdgeInsets.symmetric(horizontal: 37.72),
                    controller: _tabController,
                    indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(28.67),
                      color: Colors.red,
                    ),
                    tabs: [
                      Tab(
                        icon: Icon(Icons.person,
                            color: _tabController.index == 0
                                ? Colors.white
                                : Colors.grey),
                      ),
                      Tab(
                        icon: Icon(Icons.settings,
                            color: _tabController.index == 1
                                ? Colors.white
                                : Colors.grey),
                      ),
                      Tab(
                        icon: Icon(Icons.home,
                            color: _tabController.index == 2
                                ? Colors.white
                                : Colors.grey),
                      ),
                    ],
                  ),
                ), 

CodePudding user response：

TabController can have duration, but it doesn't expose curve or AnimationController.

_tabController = TabController(
    animationDuration: Duration(seconds: 1),

You can extend TabController and use it as your tab controller.

class MyTabController extends TabController {
  MyTabController({
    required super.length,
    required super.vsync,
  });

  @override
  void animateTo(int value, {Duration? duration, Curve curve = Curves.ease}) {
       /// your customization
    super.animateTo(value,
        duration: const Duration(seconds: 1), curve: Curves.easeOutBack);
  }
}

You can also include parameter on MyTabController for curve and duration.

And use like

 _tabController = MyTabController(
      length: 3,
      vsync: this,
    );