{"id":11714,"date":"2024-11-15T09:19:57","date_gmt":"2024-11-15T09:19:57","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11714"},"modified":"2024-11-15T09:19:57","modified_gmt":"2024-11-15T09:19:57","slug":"change-tabbar-background-color-without-affecting-appbar","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/change-tabbar-background-color-without-affecting-appbar","title":{"rendered":"How to Change Background Color of TabBar Without Changing the AppBar in Flutter?"},"content":{"rendered":"<h3>Code:<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"swift\">class HomePage extends StatelessWidget {\r\n const HomePage({super.key});\r\n @override\r\n Widget build(BuildContext context) {\r\n   return DefaultTabController(\r\n     length: 3,\r\n     child: Scaffold(\r\n       appBar: AppBar(\r\n         title: const Text(\"TabBar Background Color\"),\r\n         \/\/\/ Only change the AppBar background color\r\n         backgroundColor: Colors.blue,\r\n         bottom: PreferredSize(\r\n           preferredSize: const Size.fromHeight(48.0),\r\n           child: Container(\r\n             color: Colors.green,\r\n             \/\/\/ Set the TabBar background color\r\n             child: const TabBar(\r\n               labelColor: Colors.white,\r\n               unselectedLabelColor: Colors.black,\r\n               indicatorColor: Colors.yellow,\r\n\r\n               \/\/\/ Set indicator color if needed\r\n               tabs: [\r\n                 Tab(text: \"Tab 1\"),\r\n                 Tab(text: \"Tab 2\"),\r\n                 Tab(text: \"Tab 3\"),\r\n               ],\r\n             ),\r\n           ),\r\n         ),\r\n       ),\r\n       body: const TabBarView(\r\n         children: [\r\n           Center(child: Text(\"Tab 1 Content\")),\r\n           Center(child: Text(\"Tab 2 Content\")),\r\n           Center(child: Text(\"Tab 3 Content\")),\r\n         ],\r\n       ),\r\n     ),\r\n   );\r\n }\r\n}\r\n<\/pre>\n<h3>Output:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2024\/11\/15091948\/output.png\" alt=\"\" width=\"230\" height=\"512\" class=\"alignnone size-full wp-image-11716\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2024\/11\/15091948\/output.png 230w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2024\/11\/15091948\/output-135x300.png 135w\" sizes=\"(max-width: 230px) 100vw, 230px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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(&#8220;TabBar Background Color&#8221;), \/\/\/ 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, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-11714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11714"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11714"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11714\/revisions"}],"predecessor-version":[{"id":11717,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11714\/revisions\/11717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11715"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}