Flutter tabbar indicator border radius

Flutter TabBar Indicator Border Radius

To add a border radius to the indicator of a TabBar in Flutter, you can utilize the indicatorDecoration property of the TabBar widget. This property allows you to define a decoration for the indicator, which can include a border radius.

Here’s an example of how to accomplish this:

TabBar(
  indicator: BoxDecoration(
    borderRadius: BorderRadius.circular(10), // Set the desired border radius
    color: Colors.blue, // Set the indicator color
  ),
  tabs: [
    Tab(
      text: 'Tab 1',
    ),
    Tab(
      text: 'Tab 2',
    ),
    Tab(
      text: 'Tab 3',
    ),
  ],
)

  

In the example above, we set the indicator property of the TabBar to a BoxDecoration with a defined border radius of 10 pixels and a blue color. This will apply the specified border radius to the indicator.