How can I remove border circle in TabPageSelector?

Question

I want to create something like this But when I try to use such code:

TabPageSelector(
  controller: _tabController,
  color: Color(0x21000000),
  selectedColor: Colors.white,
),

I get in result:

What I can change for getting the exact result, which I showed in the first picture?

Answer 1

It's not supported by the TabPageSelector widget, but you can create your own Widget, I create one for you, check the code and add the file to your project:

https://gist.github.com/diegoveloper/9de80d0e22cac8a2ef4357a620b375a9

Usage:

        MyTabPageSelector(
                    controller: _controller,
                    color: Color(0x21000000),
                    //borderColor: Colors.blue     you can set your own color if you want
                    selectedColor: Colors.white,
                  )