Flutter – Tab Bar

In this article, we see the Tab bar in Flutter. Tab Bar is mostly used in applications. So we will see how we can create the tab bar in flutter just because nowadays companies demand the flutter app the most. Tab Bar generally handle with the controller and in Flutter, there are many controllers like the default controller and some controller which is developers created on their own but we will see the default controller and the default controller mostly used to make the tab bar just because it is very simple and easily developer can create. 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

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: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Custom Tap"),
        ),
        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,
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.portrait_sharp,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: TabBarView(children: [
                  // MyPostTab(),
                  // MyReelsTab(),
                  // MyTagTab(),
                ]),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Code Explanation

1. First, we create the app and then remove all the code and make the default code that we get normally.
2. We created the stateful widget and in the stateful widget, we return the default controller.
3. Default Controller required the length so we give the length as how much you want the tab, it’s up to you.
4. In the child widget of the default Controller, we return the scaffold and In Scaffold, we took the app bar and body.
5. In AppBar we took the text widget and give the name of our app.
6. In the body, we return the Column and the column takes the children widget so we take the children.
7. In children, we take the Container and give the height, width, and decoration to our container you can give according to you.
8. In Container child we take the tab widget and the tab widget takes the list of the tab so give the bracket and then we take the tab as you can see in the code.
9. After that tab take the tab bar view. tab bar view main work is to pass the page of each tab. and the tab bar view always takes the expanded widget if you do not take in the expanded widget then you can face the problem.
10. In the tab bar view we pass the page we are passing but commenting in the code but you can make the widget and pass it.

Output: