How can I change color of tab bar only when include it in the AppBar

Question

I have tried this:

child: Scaffold(
  appBar: AppBar(
    backgroundColor: Color(0xFF0AA89E),
    title: Text(
      'Archives',
      style: TextStyle(
        fontFamily: 'Poppins',
        fontSize: 17,
      ),
    ),
    bottom: TabBar(
      isScrollable: true,
      indicatorColor: Color(0xFF0AA89E),
      unselectedLabelColor: Colors.white,
      labelColor: Colors.black,
      // overlayColor:  const const Color(0xFF0AA89E),
      tabs: [
        Tab(text: '   Category'),
        Tab(text: '   Item   '),
        Tab(text: '   Variants   '),
        Tab(text: '   Choice   '),
        Tab(text: '   Extras   '),
      ],
    ),
  ),
  body: TabBarView(
    children: [
      FirstPage(),
      SecondPage(),
      ThirdPage(),
      FourPage(),
      FivePage()
    ],
  ),
);

you can refer [here](https://stackoverflow.com/questions/50566868/how-to-change-background-color-of-tabbar-without-changing-the-appbar-in-flutter). — gretal, May 23 '22 at 05:59
Does this answer your question? [How to change background color of TabBar without changing the AppBar in flutter?](https://stackoverflow.com/questions/50566868/how-to-change-background-color-of-tabbar-without-changing-the-appbar-in-flutter) — Md. Yeasin Sheikh, May 23 '22 at 07:18

score 0 · Answer 1 · answered May 23 '22 at 07:18

As for the bottom we need to use PreferredSize type widget. You can follow this answer.

 return DefaultTabController(
    length: 5,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF0AA89E),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(kTextTabBarHeight),
          child: Container(
            width: double.maxFinite,
            color: Colors.green,
            alignment: Alignment.center,
            child: const TabBar(

How can I change color of tab bar only when include it in the AppBar

1 Answers1