Like this one:

enter image description here

Below code will add Indicator bottom of TabBar:

  DefaultTabController(
    length: 2,
    child : new TabBar(
      labelColor: Colors.purple,
      indicatorColor: Colors.purple,
      indicatorSize: TabBarIndicatorSize.label,
      unselectedLabelColor: Colors.black,
    tabs: [
        new Tab(icon: Icon(Icons.chrome_reader_mode),),
        new Tab(icon: Icon(Icons.clear_all),),
    ]),
  );

But I need Indicator on top of TabBar. I don't think it's a great idea to build a custom tab bar because, I don't want to do lot of works for this simple thing.


Solution 1: Blasanka

There is a simple hack and that is to use indicator property and add UnderlineTabIndicator() and that class has named parameter called insets and as the value I added EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),

Left: 50.0, // make indicator small by 50.0 from left

Top: 0.0,

Right: 50.0, // make indicator small by 50.0 from right

Bottom: 40.0 // pushed indicator to top by 40.0 from bottom

like below:

const textStyle = TextStyle(
    fontSize: 12.0,
    color: Colors.white,
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w600);

//.....
new TabBar(
  controller: controller,
  labelColor: Color(0xFF343434),
  labelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Color(0xDD613896), width: 8.0),
    insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
  ),
  unselectedLabelColor: Color(0xFFc9c9c9),
  unselectedLabelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  tabs: [
    new Tab(
      text: 'LOGIN',
    ),
    new Tab(
      text: 'SIGNUP',
    ),
  ],
),

Also you can create a custom indicator extending Decoration


Solution 2: Sunil

You have to create a custom TabController for this. I found a simple example of Flutter TabBar Here. You can check it in detail here.


Solution 3: Luca Faggianelli

Another option is to define a new Decoration for the indicator: property of the TabBar widget, in this way you're not bound to the TabBar height (as with using insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),), but you can't create an indicator smaller than the tab itself.

here the code:

TabBar(
  indicator: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Theme.of(context).accentColor,
        width: 3.0
      ),
    ),
  ),
),