US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No 405, Kabir Shilp, Opp. Kansar Hotel, Opp. Landmark, Kudasan, Gandhinagar, Gujarat 382421

[email protected]

How to get the current tab index in Flutter?

get the current tab index in Flutter

How to 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:

    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: () {
                '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);
  _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;

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

  void dispose() {

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


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 GuideFlutter ProjectsCode 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.

Post a Comment