Flutter – Custom Tab Bar

In this article, we will see about the Custom Tab Ba, and also how you can create the tab bar inside the tab bar. Making the tab bar is very easy you just go and return the default controller and give the length and Make the tab bar, But In this article, we will see how you can create the tab bar and customize the tab bar according to you and also you are able to make the sub tab bar in the tab bar.

Tab bar is one of the most used widgets in the flutter app, and most companies prefer the tab bar in their application. To make it first create the project and replace your main code with this code which is given below by me. We write the whole code on the main screen for your easiness but you can convert it into different files for each widget. A sample video is given below to get an idea about what we are going to do in this article.

Code Implementation

Dart

// ignore_for_file: prefer_const_constructors,
// avoid_unnecessary_containers

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.green,
      ),
      home:MyCustomTab(),
    );
  }
}

class MyCustomTab extends StatefulWidget {
  const MyCustomTab({super.key});

  @override
  State<MyCustomTab> createState() => _MyCustomTabState();
}

class _MyCustomTabState extends State<MyCustomTab> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: Text("Custom SubTap"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            // mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            // ignore: prefer_const_literals_to_create_immutables
            children: [
              // ignore: prefer_const_literals_to_create_immutables
              Container(
                height: 50,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20), color: Colors.red),
                child: TabBar(
                  indicator: BoxDecoration(
                    color: Colors.red[800],
                    borderRadius: BorderRadius.circular(20),
                  ),
                  labelColor: Colors.black,
                  dividerColor: Colors.black,
                  // ignore: prefer_const_literals_to_create_immutables
                  tabs: [
                    Tab(
                      icon: Icon(
                        Icons.add_box,
                        color: Colors.black,
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.video_call,
                        color: Colors.black,
                      ),
                    ),

                  ],
                ),
              ),
              Expanded(
                child: TabBarView(children: [
                  MyTabOne(),
                  MyTabTwo(),
                  // MyPostTab(),
                  // MyReelsTab(),
                  // MyTagTab(),
                ]),
              )
            ],
          ),
        ),
      ),
    );
  }
}
class MyTabOne extends StatelessWidget {
  const MyTabOne({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(child: Text("This is Tab One",style: TextStyle(fontSize: 20),));
  }
}
class MyTabTwo extends StatelessWidget {
  const MyTabTwo({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Container(
        child: Column(
          // ignore: prefer_const_literals_to_create_immutables
          children: [
            // SwitcherButton(
            //   value: true,
            //   onChange: (value) {
            //     print(value);
            //   },
            // ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                height: 30,
                width: 150,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.white),
                child: TabBar(
                  indicator: BoxDecoration(
                    color: Colors.red[800],
                    borderRadius: BorderRadius.circular(20),
                  ),
                  labelColor: Colors.black,
                  dividerColor: Colors.black,
                  // ignore: prefer_const_literals_to_create_immutables
                  tabs: [
                    Tab(
                      text: "Live",
                    ),
                    Tab(
                      text: "Result",
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Expanded(
              // ignore: prefer_const_literals_to_create_immutables
              child: TabBarView(children: [
                // MyLivePage(),
                // MyResultPage(),
              ]),
            ),

          ],
        ),
      ),
    );
  }
}

Code Explanation

1. First, we create the Stateful widget and give the name to our stateful widget and then pass the name of the stateful widget in the home.
2. In the stateful widget, we return the default controller and the controller needs to be the length so we provide the length as much as you need the tab bar.
3. In the child section of the default controller, we return the scaffold just because we need the app bar.
4. In the scaffold, we take the app bar and the body section.
5. In the app bar, we take the text widget and give the title of our name, you can give it according to you.
6. In the body section, we take the column and the column takes the children then we take the children’s and now we take the Container and design the container according to me you can decorate it according to you.
7. In the Container child section, we will give the tab bar and the tab bar take the list of the tab so we provide it.
8. After that, we take the expanded widget and then in it we take the tab bar view.
9. In the tab bar view Simply we pass the page for both tabs.
10. In the first tab page, we simply pass the text and in the second tab, we again return the default controller for making the sub tab bar in the second tab.

Again doing all the things for making the sub bar in the second tab page. This is how we have done it just simple steps.

Output