How to get the current tab index in Flutter?

4 min read
get the current tab index in Flutter
get the current tab index in Flutter

The flutter tabcontroller index does not respond to changes in the tabbarview. Flutter tabcontroller detects the change in the tabbar but does not know the change in the tabbarview. Listener causes the text of the floatingactionbutton to change, but there is no response when the tabbarview changes. Let’s get started with How to get the current tab index in Flutter!

Also, check the TabBar Widget

How to get the current tab index in Flutter??

You can get current index by DefaultTabController.of(context).index;聽as follows:

...
appBar: AppBar(
  bottom: TabBar(
    tabs: [
      Tab(~), Tab(~)
    ]
  ),
  actions: [
    // At here you have to get `context` from Builder.
    // If you are not sure about this, check InheritedWidget document.
    Builder(builder: (context){
      final index = DefaultTabController.of(context).index;   
      // use index at here... 
    })
  ]
)

You can also add a listener to listen to changes in tabs like the below given example:

tabController = TabController(vsync: this, length: 4)
   ..addListener(() {
setState(() {
  switch(tabController.index) {
    case 0:
      // some code here
    case 1:
     // some code here
  }
  });
});

By using DefaultTabController, you can get the current index easily whether the user changes tabs by Swiping or Tapping on the tab bar.

You must wrap your Scaffold inside of a Builder and you can then retrieve the tab index with DefaultTabController.of(context).index inside Scaffold.

This is a nice example:

DefaultTabController(
    length: 3,
    child: Builder(builder: (BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Home'),
          bottom: TabBar(
              isScrollable: true,
              tabs: [Text('0'), Text('1'), Text('2')]),
        ),
        body: _buildBody(),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print(
                'Current Index: ${DefaultTabController.of(context).index}');
          },
        ),
      );
    }),
  ),

The reason for using DefaultTabController聽is for it to manage tabs by itself.

If you want some custom tab management, use TabController instead. By using TabController you can have much more information(including the Current index).

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
    );
  }
}

Conclusion:

Hope you guys are enjoying articles on flutter Development!

So, In today’s article, we have learned How to get the current tab index in Flutter!

Do share your valuable Feedback/suggestions with us. we would love to assist you!

also, go read the article for Customizing TabBar Width In Flutter.

Keep Learning!!! Keep Fluttering!! Stay Connected 馃檪

Flutter Agency聽is our portal Platform dedicated to Flutter Technology and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

Flutter Agency聽is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.

Leave a Reply