Add vertical line as a divider in tabbar as a divider

I have a tab bar and i need to put a vertical line as a divider between tabs, how to do that? this how i used my tabbar:

new TabBar(
  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"),
]),

and I need it to be like this:

enter image description here

1 Like

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"),
  ]),
2 Likes

You can use vertical divider inside a container.

Inside the row,
Girl (vertical divider) Hero

1 Like