Mastering Flutter’s TabBar: A Comprehensive Guide

Organizing Your App’s Content with Ease

When building a Flutter app, you’ll often need to categorize your content or features into different sections. This is where the TabBar class comes in – allowing users to quickly navigate between categories with a simple swipe.

Getting Started with TabBar

To implement TabBar in your Flutter app, follow these easy steps:

1. 1. Wrap your Scaffold widget inside the DefaultTabController:

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
      title: Text('Tabs Demo'),
    ),
    body: TabBarView(
      children: [
        Icon(Icons.directions_car),
        Icon(Icons.directions_transit),
        Icon(Icons.directions_bike),
      ],
    ),
  ),
)

1. Place the TabBar widget as the bottom property of AppBar.
2. Provide TabBarView in the body of the AppBar.

Customizing the Tab Indicator

Take your app’s design to the next level by modifying the tab indicator. You can change the tab color, size, height, and even add a background image. The possibilities are endless!

TabBar(
  indicatorColor: Colors.blue,
  indicatorSize: TabBarIndicatorSize.tab,
  indicatorWeight: 3,
  tabs: [
    Tab(icon: Icon(Icons.directions_car)),
    Tab(icon: Icon(Icons.directions_transit)),
    Tab(icon: Icon(Icons.directions_bike)),
  ],
)

Making Scrollable Tabs

Working with a large number of categories? Make your tabs scrollable both horizontally and vertically. Simply set the isScrollable property to True for horizontal scrolling, and use the SliverAppBar for vertical scrolling.

TabBar(
  isScrollable: true,
  tabs: [
    Tab(icon: Icon(Icons.directions_car)),
    Tab(icon: Icon(Icons.directions_transit)),
    Tab(icon: Icon(Icons.directions_bike)),
    // Add more tabs here
  ],
)

Changing Tabs Programmatically

Need more control over your tabs? Learn how to change tabs programmatically and listen for tab change events. This is especially useful when you want to perform actions based on the current tab.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
      title: Text('Tabs Demo'),
    ),
    body: TabBarView(
      children: [
        Icon(Icons.directions_car),
        Icon(Icons.directions_transit),
        Icon(Icons.directions_bike),
      ],
    ),
  ),
)

// Change tab programmatically
DefaultTabController.of(context)?.animateTo(1);

Implementing TabBar without AppBar

Want to ditch the AppBar altogether? No problem! Replace the title and bottom properties of AppBar with flexibleSpace and create a column inside it containing the actual TabBar.

Scaffold(
  appBar: AppBar(
    flexibleSpace: Column(
      children: [
        Text('Tabs Demo'),
        TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
      ],
    ),
  ),
  body: TabBarView(
    children: [
      Icon(Icons.directions_car),
      Icon(Icons.directions_transit),
      Icon(Icons.directions_bike),
    ],
  ),
)

Preserving Tab State

By default, tabs don’t preserve their state. Learn how to override this behavior and provide a seamless user experience.

// Create a TabController
final _tabController = TabController(length: 3, vsync: this);

// Use the TabController to preserve tab state
_tabController.index = 1;

Putting it all Together

With these tips and tricks, you’ll be well on your way to mastering Flutter’s TabBar. Remember to experiment and customize your tabs to fit your app’s unique needs. Happy coding!