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.
Table of Contents
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:
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.
