Flutter: TabBar and Tricks

There are many articles available but all talks about creating TabBar which I thought not justifying Tab Bar work & not enough content available online, so here I will share my knowledge about TabBar which will help you with your interview also :)

First, we will see the basic example of TabBar, Three things are important while creating a tab bar

1. Create a TabController.
2. Create the tabs.
3. Create content for each tab.

DefaultTabController(
  length: 2,
  child: MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          onTap: (index) {
           // Tab index when user select it, it start from zero
          },
          tabs: [
            Tab(icon: Icon(Icons.card_travel)),
            Tab(icon: Icon(Icons.add_shopping_cart)),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        children: [
          Center(
              child: Text(
            "0",
            style: TextStyle(fontSize: 40),
          )),
          Center(
              child: Text(
            "1",
            style: TextStyle(fontSize: 40),
          )),
        ],
      ),
    ),
  ),
);

Output:

Tab Bar App

The above example is self exemplary, so no need to explain and wasting your time.

Do you know?

1. onTap() method is not getting called when you swipe
2. Above error can be resolved using TabBar

So, let's modify code and see if it works or not.

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  int _selectedIndex = 0;

  List<Widget> list = [
    Tab(icon: Icon(Icons.card_travel)),
    Tab(icon: Icon(Icons.add_shopping_cart)),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // Create TabController for getting the index of current tab
    _controller = TabController(length: list.length, vsync: this);

    _controller.addListener(() {
      setState(() {
        _selectedIndex = _controller.index;
      });
      print("Selected Index: " + _controller.index.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index) {
              // Should not used it as it only called when tab options are clicked,
              // not when user swapped
            },
            controller: _controller,
            tabs: list,
          ),
          title: Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: _controller,
          children: [
            Center(
                child: Text(
                  _selectedIndex.toString(),
                  style: TextStyle(fontSize: 40),
                )),
            Center(
                child: Text(
                  _selectedIndex.toString(),
                  style: TextStyle(fontSize: 40),
                )),
          ],
        ),
      ),
    );
  }
}

In the above code, we add some new things so let's go one by one

TabController: It is used for managing the state of the tab bar, the length which we mentioned in TabController should not be null or negative, otherwise you will put yourself in endless debugging.

TabController(length: list.length, vsync: this);

vsync Uses:

1. vsync is the property that represents the TickerProvider (i.e., Tick is similar to clock’s tick which means that at every certain duration TickerProvider will render the class state and redraw the object.)
2. vsync property is required only on that constructor which requires to render its class state at every certain off-set time when we need to render our components or widgets to redraw and reflect the UI.
3. vsync can be used with the classes which require certain transition or animation to re-render to draw different objects.

For Ex: vsync with AnimationController() class will inform our app to redraw the frames at every fraction of seconds to generate the animation for providing greater user experience.

addListener():

This will provide a callback whenever the tab bar state gets modified and provide us the selected tab bar index on swipe :)

Hope you like this tutorial & subscribe to our channel for more such videos

Github Link:

https://github.com/jitsm555/Flutter-Problems/tree/master/tab_bar_tricks

Video: