How to get current tab index in Flutter

Question

In flutter implementing a tab layout is easy and straightforward. This is a simple example from the official documentation:

import 'package:flutter/material.dart';

void main() {
  runApp(new TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
            ),
            title: new Text('Tabs Demo'),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

But here is the thing, I want to get the active tab index so I can apply some logic on certain tabs. I search the documentation but I wasn't able to figure it out. Can you guys help and thanks?

The answer to your problem is here [enter link description here](https://stackoverflow.com/a/65161942/14208424) — ALNAJJAR, Dec 05 '20 at 21:10

score 62 · Accepted Answer · edited Jul 18 '22 at 15:28

62

The whole point of DefaultTabController is for it to manage tabs by itself.

If you want some custom tab management, use TabController instead. With TabController you have access to much more informations, 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(),
      ),
    );
  }
}

edited Jul 18 '22 at 15:28

Md. Yeasin Sheikh

54,221
7
29
56

answered May 01 '18 at 20:52

Rémi Rousselet

256,336
79
519
432

25

In this example how to get the index ?? i tried adding the lister but after building a particular tab view then the listener was printing the index i want to get the index before building the layout of the particular tab any idea ? – sarvesh chavan Apr 20 '19 at 05:28
1

statefull only? – shinriyo Jun 11 '20 at 00:18
Hey @sarveshchavan did you get any solution? – Sachin Jun 18 '20 at 12:12
4

To get the index of tabs simply do `_tabController.index` – repleeka May 28 '21 at 08:11
thanks buddy, need to place controller: on both places worked for me!! – Rahul Jograna Mar 02 '22 at 06:45
not sure why the top tabs are a mess in flutter whereas the bottom tabs are super cool and easy – Syed Arsalan Kazmi Feb 09 '23 at 22:49

score 59 · Answer 2 · answered Feb 09 '19 at 13:58

59

In this case, using StatefulWidget and State isn't a good idea.

You can get current index by DefaultTabController.of(context).index;.

Follow the code:

...
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... 
    })
  ]
)

answered Feb 09 '19 at 13:58

google ogiwara

599
4
2

1

Wrapping the whole `Scaffold` inside a `Builder` worked for me. – Rami Alloush Jun 14 '19 at 16:23
1

Thanks, This is all I was looking for. – punjabi4life Aug 15 '19 at 08:31
2

This should be accepted answer. Simplest solution requiring the least amount of code modifications. – surtyaar Jul 26 '20 at 15:50
I am always getting 0 as the index. Any help?? – Vishnu E R Nov 16 '22 at 04:12
looks like something strange implemented... https://flutteragency.com/get-the-current-tab-index-in-flutter/ – Zhar Nov 24 '22 at 23:42

score 34 · Answer 3 · answered Jul 10 '19 at 10:15

34

You can access the current index when the tab is selected by onTap event of TabBar.

TabBar(
    onTap: (index) {
      //your currently selected index
    },

    tabs: [
      Tab1(),
      Tab2(),
    ]);

answered Jul 10 '19 at 10:15

Usman

2,547
31
35

25

This does not work as desired if the user changes tabs by swiping. Only if they actually tap on the tab bar. – dakamojo Aug 26 '19 at 20:59

score 19 · Answer 4 · answered Jul 12 '19 at 22:43

19

Just apply a listener on the TabController.

// within your initState() method
_tabController.addListener(_setActiveTabIndex);

void _setActiveTabIndex() {
  _activeTabIndex = _tabController.index;
}

answered Jul 12 '19 at 22:43

CoastalB

695
4
15

score 15 · Answer 5 · answered Jun 30 '20 at 10:36

Use DefaultTabController you can get current index easily whether the user changes tabs by swiping or tap on the tab bar.

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

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}');
          },
        ),
      );
    }),
  ),

Hmm, this doesn't rebuild when the index changes it looks like? I can get the index when the widget is initially built, but it never seems to change / update in the `Builder` context. — Hanzy, Aug 20 '23 at 02:23

RuslanBek · Answer 6 · 2021-04-03T09:25:15.390

New working solution

I'd suggest you to use TabController for more customisations. To get active tab index you should use _tabController.addListener and _tabController.indexIsChanging.

Use this full code snippet:


class CustomTabs extends StatefulWidget {
  final Function onItemPressed;

  CustomTabs({
    Key key,
    this.onItemPressed,
  }) : super(key: key);

  @override
  _CustomTabsState createState() => _CustomTabsState();
}

class _CustomTabsState extends State<CustomTabs>
    with SingleTickerProviderStateMixin {

  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

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

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

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        setState(() {
          _activeIndex = _tabController.index;
        });
      }
    });
    return Container(
      color: Colors.white,
      child: TabBar(
        controller: _tabController,
        isScrollable: true,
        indicatorPadding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
        indicator: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0), color: Colors.green),
        tabs: myTabs
            .map<Widget>((myTab) => Tab(
                  child: Container(
                    width: width / 3 -
                        10, // - 10 is used to make compensate horizontal padding
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.0),
                      color:
                          _activeIndex == myTabs.indexOf(myTab)
                              ? Colors.transparent
                              : Color(0xffA4BDD4),
                    ),
                    margin:
                        EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        myTab.text,
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ))
            .toList(),
        onTap: widget.onItemPressed,
      ),
    );
  }
}

thanks. I modify the code and work fine. if (!_tabController.indexIsChanging) { setState(() { _activeIndex = _tabController.index; }); } — HalZhang, Jul 19 '23 at 08:09

score 5 · Answer 7 · answered Jun 27 '19 at 09:43

5

Thanks to the example of Rémi Rousselet, you can do it, the code like this:

_tabController.index

This will return the current index of the position of your TabBarView

answered Jun 27 '19 at 09:43

AlexPad

10,364
3
38
48

score 3 · Answer 8 · answered May 16 '20 at 21:48

3

You can add a listener to listen to changes in tabs like below

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

answered May 16 '20 at 21:48

Huzaifa Ahmed

304
1
3
15

1

Don't forget to restart the app after this, instead of just using the hot reload. Since the hot reload won't necessarily run the initState for your screen again. – George Nov 13 '20 at 14:11

score 0 · Answer 9 · answered Nov 25 '22 at 00:37

Well, nothing here was working in my case.

I tried several responses so as a result i used a provider to keep and retrieve the current index selected.

First the model.

class HomeModel extends ChangeNotifier {
  int _selectedTabIndex = 0;

  int get currentTabIndex => _selectedTabIndex;

  setCurrentTabIndex(final int index){
    _selectedTabIndex = index;
    // notify listeners if you want here
    notifyListeners();
  }
  
  ...
  
 }

Then i used _tabController.addListener() to update my model.

    class HomePageState extends State<HomeScreen> {
    
      late TabController _tabController;
    
      @override
      void initState() {
        super.initState();
        _tabController = TabController(vsync: this, length: _tabs.length);
        _tabController.addListener(() {
          context.read<HomeModel>().setCurrentTabIndex(_tabController.index);
        });
      }
    
       ...
       
       @override
       Widget build(BuildContext context) {
          return DefaultTabController(
          length: _tabs.length,
          child :
            Scaffold(
              backgroundColor: Colors.white70,
              appBar: AppBar(
                /*iconTheme: IconThemeData(
                    color: Colors.black
                ),*/
                bottom: TabBar(
                  controller: _tabController,
                  tabs: _tabs,
                ),
                title: Text(_getAppBarTitle(),style: const TextStyle(/*color: Colors.red,*/fontSize: 22.0),)
                ...
                
                )
            )
        );
    }
       ...
    }

Finally last but not least retrieve value when you need.

class _AppState extends State<App> {

  @override
  Widget build(BuildContext context) {
    return Consumer<HomeModel>(
        builder: (context, homeModel, child) {
          return Text(homeModel.currentTabIndex); // herre we get the real current index
    });
  }
}

score 0 · Answer 10 · answered Feb 08 '23 at 12:25

Set the variable in top.

    class _MainTabWidgetState extends State<MainTabWidget> {
    
      @override   void initState() {
        // TODO: implement initState
        super.initState();   
       }
    
      int selected_index = 0;
 }

Now set index in Tabbar onTap

    onTap: (index) {
          setState(() {
      selected_index = index;
    });
   },

score -2 · Answer 11 · answered Apr 25 '20 at 17:03

This Code will give you index of Active tab , also save the tab index for future use, and when you back to the tab page the the previous active page will be displayed.

import 'package:flutter/material.dart';

    void main() {
      runApp(new TabBarDemo());
    }

    class TabBarDemo extends StatelessWidget {


      TabScope _tabScope = TabScope.getInstance();

      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          home: new DefaultTabController(
            length: 3,
            index: _tabScope.tabIndex, // 
            child: new Scaffold(
              appBar: new AppBar(
                bottom: new TabBar(
                  onTap: (index) => _tabScope.setTabIndex(index),  //current tab index
                  tabs: [
                    new Tab(icon: new Icon(Icons.directions_car)),
                    new Tab(icon: new Icon(Icons.directions_transit)),
                    new Tab(icon: new Icon(Icons.directions_bike)),
                  ],
                ),
                title: new Text('Tabs Demo'),
              ),
              body: new TabBarView(
                children: [
                  new Icon(Icons.directions_car),
                  new Icon(Icons.directions_transit),
                  new Icon(Icons.directions_bike),
                ],
              ),
            ),
          ),
        );
      }
    }

    class TabScope{ // singleton class
      static TabScope _tabScope;
      int tabIndex = 0;

      static TabScope getInstance(){
        if(_tabScope == null) _tabScope = TabScope();

        return _tabScope;
      }
      void setTabIndex(int index){
        tabIndex = index;
      }
    }

How to get current tab index in Flutter

11 Answers11

Linked