Flutter styling unselected tab indicator

Issue

I am attempting to create a tab indicator in flutter with a topright and topleft border radius and manage to apply it to the active tab but cannot figure out how to apply it to the unselected tab indicator.

Below what i want to achieve

this is my exiting code

setColor(int tabIndex) {
    if (tabIndex == 0) {
      return const Color(0xFFFBD59E);
    } else if (tabIndex == 1) {
      return const Color(0xFFC8E0DA);
    } else if (tabIndex == 2) {
      return Colors.yellow;
    }
  }

    TabBar(
          labelStyle: const TextStyle(
             fontSize: 18.0, fontWeight: FontWeight.w600),
               onTap: (index) {
                 setState(() {
                          tabIndex = index;
                          setInactiveColor(index);
                        });
                      },
                      controller: _controller,
                      tabs: const [
                        Tab(
                          text: 'Tab 1',
                        ),
                        Tab(
                          text: 'Tab 2',
                        ),
                      ],
                      indicator: ShapeDecoration(
                        shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(50),
                            topLeft: Radius.circular(50),
                          ),
                        ),
                        color: setColor(tabIndex),
                      ),
                    ),

And this what i get, is there anyway to style the unselected tab indicator?

Solution

I don't think there is a way to style the default Tab widget the way you want just using properties of TabBar. Instead you can use another widget instead of Text for Tab's child.

TabBar(
      labelStyle: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600),
      onTap: (index) {
        setState(() {
          tabIndex = index;
        });
      },
      controller: _controller,
      labelPadding: EdgeInsets.zero,
      tabs: [
        Tab(
          child: _buildTab(text: 'Tab 1', color: Colors.red),
        ),
        Tab(
          child: _buildTab(text: 'Tab 2', color: Colors.blue),
        ),
      ],
    ),

The _buidTab method is as follows:

_buildTab({required String text, required Color color}) {
    return Container(
      alignment: Alignment.center,
      width: double.infinity,
      decoration: ShapeDecoration(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(50),
            topLeft: Radius.circular(50),
          ),
        ),
        color: color,
      ),
      child: Text(text),
    );
  }

Answered By - Ramin