How to Create TabBar Background Color in Flutter?

In this guide, we’ll explore multiple solutions to add a TabBar Background Color in Flutter, with a special focus on the ColoredTabBar class.

The TabBar is a common UI component used in Flutter for navigation within the application. While it’s versatile and easy to implement, customizing its appearance, especially adding a background color, might not be immediately obvious.

background color in tabar flutter

Solution 1: Using an AppBar to TabBar Background Color in Flutter

One straightforward method to add a background color to the TabBar with an Appbar widget. Here’s how you can do it:

import 'package:flutter/material.dart';

/// Flutter code sample for [BottomNavigationBar].

void main() => runApp(const BottomNavigationBarExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabScreen(),
    );
  }
}

class MyTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Tab Bar Color"),
          backgroundColor: Colors.blue, // Background color of the app bar
          bottom: TabBar(
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            // Contents of Tab 1
            Container(),
            // Contents of Tab 2
            Container(),
            // Contents of Tab 3
            Container(),
          ],
        ),
      ),
    );
  }
}

Output:

Output of background color of tabbar in flutter

Solution 2: Creating a Custom TabBar Widget

For more flexibility and reusability, you can create a custom TabBar widget that includes background color as a parameter. Here’s an example of how you can implement it:

import 'package:flutter/material.dart';

class ColoredTabBar extends Container implements PreferredSizeWidget {
  ColoredTabBar({required this.color, required this.tabBar});

  final Color color;
  final TabBar tabBar;

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  Widget build(BuildContext context) => Container(
    color: color,
    child: tabBar,
  );
}

Now, you can use this ColoredTabBar widget in your app like this:

class MyTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: ColoredTabBar(
            color: Colors.blue, // Background color of the TabBar
            tabBar: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: [
            // Contents of Tab 1
            Container(),
            // Contents of Tab 2
            Container(),
            // Contents of Tab 3
            Container(),
          ],
        ),
      ),
    );
  }
}

By using the ColoredTabBar class, you encapsulate the logic of setting the background color within the TabBar, making your code cleaner and more maintainable.

Solution 3: Use PreferredSize to TabBar Background Color in Flutter

You can go through the direct PreferredSize widget to add a background color in tabBar in Flutter like this:

class MyTabScreen extends StatelessWidget {
  TabBar get _tabBar => TabBar(
    tabs: [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('AppBar'),
          bottom: PreferredSize(
            preferredSize: _tabBar.preferredSize,
            child: ColoredTabBar(
              color: Colors.red, // Customize background color here
              tabBar: _tabBar,
            ),
          ),
        ),
        body: TabBarView(
          children: [
            // Contents of Tab 1
            Center(child: Text('Contents of Tab 1')),
            // Contents of Tab 2
            Center(child: Text('Contents of Tab 2')),
          ],
        ),
      ),
    );
  }
}

If you want to learn to build full applications in Flutter visit here How to Create a TODO App in Flutter?

Also Read:

Conclusion

Customizing the appearance of Flutter widgets like the TabBar can greatly enhance the user experience of your app.

Whether you choose to wrap the TabBar with a Container or create a custom TabBar widget, ColoredTabBar, adding a background color is simple and effective.

Enhancing the TabBar in your Flutter app with colored backgrounds is essential for creating visually appealing and user-friendly interfaces.

With the ColoredTabBar widget, you can streamline your code and elevate your app’s design effortlessly also you can make any class customizable in Flutter.

You can visit Flutter’s official documentation for more.

Share:
Ambika Dulal

Ambika Dulal is a Flutter Developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.

Services

UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion

Contact

App Override

New Plaza, Kathmandu