Subscribe

Flutter TabBar the basics

โœ๏ธ

Learn how to make a basic TabBar in Flutter

11 Jul, 2021 ยท 3 min read

A lot of apps come with a TabBar. It's that icon bar you see to navigate through the app quickly.

Some examples of these TabBars can be found in the Twitter or Instagram app:

TabBars in mobile apps

And yes, we'll be learning how to create this in Flutter today.

Creating a TabBar in Flutter

Let's start with our basic Flutter application and work from there today. We'll do all our code in the lib/main.dart file.

Now let's modify our main function to include a TabBar.

void main() async {
  runApp(
    MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Demo'),
            bottom: 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),
            ],
          ),
        ),
      ),
    ),
  );
}

This is the most basic setup for a TabBar in Flutter. As you can see, it leverages the AppBar, and provides a bottom part. This bottom part includes a TabBar with some icons.

Then, in our application's actual body, we should add a TabBarView with an equal amount of children.

With this, we can click the icons or even scroll through them by swiping!

You can download the completed code from GitHub.

You might have noted the default Flutter TabBar is positioned at the top. In a later article, we'll look at how to set it at the bottom.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Adding Auth0 to a Flutter application

22 Aug, 2021 ยท 14 min read

Adding Auth0 to a Flutter application

Creating dialogs in Flutter

21 Aug, 2021 ยท 6 min read

Creating dialogs in Flutter

Join 1828 devs and subscribe to my newsletter