How To Easily Use Flutter Appbar Tabs [Easy Flutter Guide]

In this tutorial, we’ll learn how to properly use Flutter appbar tabs with the help of multiple practical Flutter code examples.

Introduction: Flutter Appbar Tabs

Flutter appbar tabs are used to show different screens. First we’ll implement tabs in Flutter appbar widget. After that, we’ll specify screens and assign a screen to each tab. Finally, when we click on a tab, it’ll show a screen specified to it.

Let’s practically implement it using a proper Flutter code example.

Implementing Flutter Appbar Tab (Easy Example)

Follow below steps in order to understand how to properly implement and use Flutter appbar tabs.

Step 1

DefaultTabController(
        length: 4,
        initialIndex: 0,
        child: Scaffold()

Wrap the scaffold widget of a screen where you want to show the tabs with a default tab controller. Its used to specify the number of tabs.

It has other constructors as well like what tab should be automatically selected when the user navigate to that screen. Initial index is used for that purpose. By default, it is 0(0 means first tab). Index starts from 0 which means 4 tabs will have an index of 0,1,2,3.

Step 2

appBar: AppBar(
    bottom: TabBar(
        tabs: [
              Tab(
                icon: Icon(
                  Icons.home,
                  size: 20,
                ),
                text: 'Home',
              ),
              Tab(
                icon: Icon(
                  Icons.chat,
                  size: 20,
                ),
                text: 'Chats',
              ),
              Tab(
                icon: Icon(
                  Icons.message,
                  size: 20,
                ),
                text: 'Messages',
              ),
              Tab(
                icon: Icon(
                  Icons.person,
                  size: 20,
                ),
                text: 'Profile',
              )
            ]),
          )

We’ve to pass the appbar widget to appbar constructor of Flutter scaffold.
After that, we’ve to pass the tab bar widget to its bottom constructor.
This tab bar widget has a tabs constructor which takes a list. We can pass a Flutter widget to it.
Just make sure that the number of widgets match the number specified in tab bar controller.

Above image shows four Flutter appbar tabs. Let’s now customize the body as well.

Step 3

body: TabBarView(children: [
            Center(
              child: Text(
                'Home Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'Chats Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'Message Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'Profile Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            )
          ])

We’ve passed the tab bar view widget to the body constructor of Flutter scaffold widget.
It has a constructor of name children which takes a list of widgets. We can specify widgets here.
This list is order sensitive, which means first widget will be assigned to first tab, second widget to second tab and so on.
Also make sure that the number of tabs and the number of widgets in list match. If not, then it’ll give an error.

So this is how we can easily use and customize Flutter appbar tabs. Do give it a try and ask if you still have any questions related to the implementation or customization of Flutter appbar tabs. I’ll be very happy to answer all.

Below section features the complete source code of Flutter appbar tabs.

Flutter Appbar Tabs Complete Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 4,
        initialIndex: 1,
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text('Flutter Appbar Tabs'),
            bottom: TabBar(tabs: [
              Tab(
                icon: Icon(
                  Icons.home,
                  size: 20,
                ),
                text: 'Home',
              ),
              Tab(
                icon: Icon(
                  Icons.chat,
                  size: 20,
                ),
                text: 'Chats',
              ),
              Tab(
                icon: Icon(
                  Icons.message,
                  size: 20,
                ),
                text: 'Messages',
              ),
              Tab(
                icon: Icon(
                  Icons.person,
                  size: 20,
                ),
                text: 'Profile',
              )
            ]),
          ),
          body: TabBarView(children: [
            Center(
              child: Text(
                'Home Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'Chats Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'Message Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'Profile Selected',
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to properly use and customize Flutter appbar tabs. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.