Flutter dart – How to make a custom TabBar

In this flutter dart tutorial, I am sharing how to make a custom TabBar and set the color of the tab. Like in Tabbar, your tab shows at the top of the screen with a simple UI. So Now I have customized the UI and changed the ti tab like the toggle button in the flutter. like seen

Table of Contents

in the below image.

Tabbar with custom TabBar UI and color and on-click on-screen UI change. Also, Removing the drop shadow from a Scaffold AppBar in Flutter?

So Let’s Start to create a flutter App and open your main. dart file. if you have an existing project open the file where you want to add this and follow the below code.

Flutter custom TabBar

return DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0.0,
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(
            AppBar().preferredSize.height),
        child: Container(
          height: 60,
          padding: const EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 5,
          ),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                10,
              ),
              color: Colors.grey[200],
            ),
            child: TabBar(
              labelColor: Colors.white,
              unselectedLabelColor: Colors.black,
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(
                  10,
                ),
                color: Colors.pink,
              ),
              tabs: const [
                Tab(
                  text: 'Basic',
                ),
                Tab(
                  text: 'Advanced',
                )
              ],
            ),
          ),
        ),
      ),
    ),
  ),
);

Now you can handle the tab and click and change the Screen UI class on the tab click. for that create two new dart files for custom TabBar with the name of IncomingPage and OutgoingPage.

body: TabBarView(
  children: [
    IncomingPage(),
    OutgoingPage(),
  ],
),

Flutter dart – How to make a custom TabBar Full Souce code

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'IncomingPage.dart';
import 'OutgoingPage.dart';

class StatisticScreenView extends StatefulWidget {
  const StatisticScreenView({Key? key}) : super(key: key);

  @override
  _StatisticScreenViewState createState() => _StatisticScreenViewState();
}

class _StatisticScreenViewState extends State<StatisticScreenView> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(
                AppBar().preferredSize.height),
            child: Container(
              height: 60,
              padding: const EdgeInsets.symmetric(
                horizontal: 20,
                vertical: 5,
              ),
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    10,
                  ),
                  color: Colors.grey[200],
                ),
                child: TabBar(
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.black,
                  indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(
                      10,
                    ),
                    color: Colors.pink,
                  ),
                  tabs: const [
                    Tab(
                      text: 'Basic',
                    ),
                    Tab(
                      text: 'Advanced',
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
        body: TabBarView(
          children: [
            IncomingPage(),
            OutgoingPage(),
          ],
        ),
      ),
    );
  }
}

Create IncomingPage. dart file add code below

import 'package:flutter/material.dart';

class IncomingPage extends StatefulWidget {


  @override
  _IncomingPageState createState() => _IncomingPageState();
}

class _IncomingPageState extends State<IncomingPage> {


  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Text("Basic")
      ),
    );
  }
}

Create OutgoingPage. dart the file and add the code below.

import 'package:flutter/material.dart';

class OutgoingPage extends StatefulWidget {

  @override
  _OutgoingPageState createState() => _OutgoingPageState();
}

class _OutgoingPageState extends State<OutgoingPage> {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Text("Advanced")
      ),
    );
  }
}

add a comment