How to customize tabBar?-CodePudding

I want to make tapBar looking like this:

But only got this:

This is my code(DefaultTabContainer is wrapped with container with height: 600 and width: 300):

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: PreferredSize(
    preferredSize: Size.fromHeight(35.h),
    child: Container(
      margin: EdgeInsets.symmetric(horizontal: 10.w),
      decoration: BoxDecoration(
        //color: const Color(0xFF1C1B20),
        borderRadius: BorderRadius.circular(12),
      ),
      child: TabBar(
        controller: _tabController,
        indicatorPadding:
          const EdgeInsets.symmetric(vertical: 5),
          indicator: const ShapeDecoration(
            shape: RoundedRectangleBorder(
              borderRadius:
                BorderRadius.all(Radius.circular(5)),
            ),
            color: Color(0xFF4F4E51),
          ),
          labelColor: Colors.white,
          physics: const NeverScrollableScrollPhysics(),
          labelStyle: const TextStyle(
            color: Colors.white,
            fontSize: 12
          ),
          tabs: const [
            Tab(
              text: "Day",
            ),
            Tab(
              text: "Week",
            ),
            Tab(
              text: "Month (Soon)",
            ),
          ]),
        ),
      )
  )
)

TabController in initState:

_tabController = TabController(vsync: this, length: numberTabs); // numberTabs = 3

I tried to make it like I want but I cannot and I don't understand why...

CodePudding user response：

You can set each tabs as below

tabs:[
  Tab(
    child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
              color: Colors.red,
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Day",
                    ),
                  ),
                ),
              ),]