Code:
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text("TabBar Background Color"),
/// Only change the AppBar background color
backgroundColor: Colors.blue,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(48.0),
child: Container(
color: Colors.green,
/// Set the TabBar background color
child: const TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.yellow,
/// Set indicator color if needed
tabs: [
Tab(text: "Tab 1"),
Tab(text: "Tab 2"),
Tab(text: "Tab 3"),
],
),
),
),
),
body: const TabBarView(
children: [
Center(child: Text("Tab 1 Content")),
Center(child: Text("Tab 2 Content")),
Center(child: Text("Tab 3 Content")),
],
),
),
);
}
}
Output:
