Add vertical line as a divider in tabbar as a divider

Finally It worked for me

TabBar(
    tabs: [
        _individualTab('assets/icons/bottom_nav/Home.png'),
        _individualTab('assets/icons/bottom_nav/Guys.png'),
        _individualTab('assets/icons/bottom_nav/Notes.png'),
        Tab(
            icon: ImageIcon(
                AssetImage('assets/icons/bottom_nav/Email.png')
            ),
        ),
    ],
    labelColor: STColors.PRIMARY_COLOR,
    unselectedLabelColor: Colors.grey,
    indicatorColor: Colors.white,
    indicatorSize: TabBarIndicatorSize.tab,
    labelPadding: EdgeInsets.all(0),
    indicatorPadding: EdgeInsets.all(0),
),

Individual Tab Function

Widget _individualTab(String imagePath) {
    return Container(
        height: 50 + MediaQuery
          .of(context)
          .padding
          .bottom,
        padding: EdgeInsets.all(0),
        width: double.infinity,
        decoration:  BoxDecoration(border: Border(right: BorderSide(color: STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
        child: Tab(
            icon: ImageIcon(AssetImage(imagePath)),
        ),
    );
}

To achieve small size separator you can use this.

Widget _individualTab(String imagePath) {
return Container(
  height: 50,
  width: double.infinity,
  decoration:  BoxDecoration(
    border: Border(right: BorderSide(color: STColors.LIGHT_BORDER,
        width: 0,
        style: BorderStyle.solid),
    ),
  ),
  child: Stack(children: <Widget>[
    Center(
        child: Tab(
          icon: ImageIcon(AssetImage(imagePath)),
        ),
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Container(
        color: STColors.appBlackMedium,
        width: 1,
        height: 25,
      ),
    )
  ],)
);

}

All you need is

indicator: BoxDecoration(
  border: Border(
    left: BorderSide(color: Colors.grey), // provides to left side
    right: BorderSide(color: Colors.grey), // for right side
  ),
),

Your solution:

new TabBar(
  indicator: BoxDecoration(border: Border(right: BorderSide(color: Colors.orange))),
  unselectedLabelColor: Color.fromRGBO(119, 119, 119, 1),
  labelColor: Colors.black,
  controller: controller,
  tabs: <Tab>[
    new Tab(text: "Girls"),
    new Tab(text: "Hero"),
    new Tab(text: "Open"),
  ]),

Here is the Header I want to achieve

Yea, so I added a var called rightDivider which lets you render divider but the last tab on my custom tab widget.

import 'package:flutter/material.dart';

class TabWidget extends StatelessWidget {
  final String label;
  final bool rightDivider;

  TabWidget({
    required this.label,
    required this.rightDivider,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
    height: 32 + MediaQuery.of(context).padding.bottom,
      width: double.infinity,
      padding: EdgeInsets.all(0),
      decoration: (rightDivider)
          ? BoxDecoration(
              border: Border(
                right: BorderSide(
                  color: Colors.grey,
                  width: 1,
                  style: BorderStyle.solid,
                ),
              ),
            )
          : null,
      child: Center(child: Text(label)),
    );
  }
}

And called this widget like this

TabBar(
    controller: _tabController,
    tabs: [
        TabWidget(
            label: 'Today',
            rightDivider: true,
        ),
        TabWidget(
            label: 'Calendar',
            rightDivider: true,
        ),
        TabWidget(
            label: 'Report',
            rightDivider: false,
        ),
    ],
)

That's how I achieve this behavior...

HomeTab({required String title, bool isSeprator = true}) {
    return Tab(
      child: Container(
        width: 100,
        height: 20,
        child: Center(
          child: Text(title),
        ),
        decoration: isSeprator
            ? BoxDecoration(
                border: Border(
                  left: BorderSide(
                    color: Colors.grey,
                    width: 1,
                    style: BorderStyle.solid,
                  ),
                ),
              )
            : null,
      ),
    );
  }

isSeparator is to show separator or not ... because on the last index I am not showing...

Following is the list of tabs ...

List<Widget> _tabScroll() => [
        HomeTab(title: "Tab1"),
        HomeTab(title: "Tab2"),
        HomeTab(title: "Tab3", isSeparator: false),
      ];

and following is the most important TabBar Code...

         TabBar(
                labelPadding: EdgeInsets.symmetric(horizontal: 0), //removing extra space 
                controller: _controller,
                isScrollable: true,
                indicatorColor: Colors.black,
                indicatorSize: TabBarIndicatorSize.label,
                indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(width: 3.0), //hight of indicator
                  insets: EdgeInsets.symmetric(horizontal: 30.0), //give some padding to reduce the size of indicator 
                ),
                unselectedLabelColor: Colors.grey,
                tabs: _tabScroll(), //list of tabs
              ),

The end result looks like this...