Remove highlight when Flutter's TabBar is tapped

Question

I'm trying to implement my own TabBar design in flutter. I was able to get a pretty good result. However, when I tap another tab to change the tab, there is a highlight create by default as shown in the image here. I'm wondering if there is any way I can get rid of the square highlight on tapped. I've been looking around for like almost a day not and did not find any solution.

If anyone have any solution please let me know. Thanks.

Edited: as CopsOnRoad suggestion I wrapped the TabBar in the Container and set the color to Colors.transparent, but it does not really disappear so I tried to set the color to Theme.of(context).canvasColor for now.

    Container(
      color: Theme.of(context).canvasColor,
      child: TabBar(
        isScrollable: true,
        indicator: ShapeDecoration(
          color: Color(0xFFE6E6E6),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(99.0)
          )
        ),
        tabs: List<Widget>.generate(
          categories.length,
          (index) => Tab(
            child: Text(
              categories[index],
              style: TextStyle(
                fontFamily: 'Hiragino Sans',
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
                color: Color(0xFF4D4D4D),
              ),
            ),
          )
        ),
      )
    )

Answer 1

That's the ripple effect. You can remove it by wrapping it in a Container and giving transparent color to it.

Answer 2

You can also disable the ripple/highlight/splash effect with the code below. Add the Theme with the data of ThemeData where the hightlight and splash color is both transparent.

return Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(70),
      child: Theme(
        data: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      child: AppBar( ... )

Answer 3

Here is my custom solution from @Tempelriter

     Theme(
        data: Theme.of(context).copyWith(
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.gray,
            border: Border.all(
              color: Colors.red
            ),
            borderRadius: BorderRadius.circular(50),
          ),
          child: TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: 'comingSoon'),
              Tab(text: 'selling'),
            ],
          ),
        ),
      );