Tab indicator not sliding when controller is added

Issue

I added a Tab in my app

My code looks like:

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: Text("ADD ITEM"),
      bottom: TabBar(
        indicatorColor: Colors.white,
        tabs: [
          Tab(text: "Main Product"),
          Tab(text: "Unit Groups"),
        ],
      ),
    ),
    body: TabBarView(
      // physics: NeverScrollableScrollPhysics(),
      controller: _tabController,
      children: [Container(), UnitGroupsList()],
    ),
  ),
);

I initiated controller like:

  @override
  void initState() {
   _tabController = new TabController(
   length: 2,
   vsync: this,
 );
 super.initState();

}

However, when I set controller to this TabBarView and when I swipe to change tab, the indicator of tab does not slide.

And when I manually click on another tab, only indicator is moved

Required:
Tab1

Tab2

What I get:

When I swiped, I moved to next tab, but indicator is still at 1st tab:
When i swiped i moved to next tab but indicator is still at 1st tab

Solution

DefaultTabController.of(context).animateTo(1);

This did the job, I didn’t have to assign controller to navigate between tabs.

Answered By – Umesh Chakradhar

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *