Question 202565 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to add a vertical divider inside a TabBar?

I want to add this divider inside my TabBar:

enter image description here

I tried adding a simple Container between the two tabs but they shift left and right so they don’t look in the center. Here is my code so far:

Container(
  height: 38,
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(color: AppColors.borderColor),
      top: BorderSide(color: AppColors.borderColor),
    ),
  ),
  padding: const EdgeInsets.symmetric(vertical: 7),
  child: TabBar(
    indicatorColor: Colors.transparent,
    labelColor: AppColors.primaryColor,
    unselectedLabelColor: Colors.black,
    dividerColor: Colors.black,
    tabs: [
      Tab(
        child: Text(
          'Products',
          style: kButtonsStyle.copyWith(
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      Tab(
        child: Text(
          'Suppliers',
          style: kButtonsStyle.copyWith(
            fontWeight: FontWeight.w400,
          ),
        ),
      )
    ],
  ),
),
Tags:

2

Answers


  1. 0 
    TabBar(
    tabs: [
        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: Text(
            "Products",
        ),
    ),
        Container(
        height: 50 + MediaQuery
          .of(context)
          .padding
          .bottom,
        padding: EdgeInsets.all(0),
        width: double.infinity,
        
        child: Text(
            "Supplier",
        ),
    );
    ],
    //...
),
    Login or Signup to reply.
  2. 0 
    const VerticalDivider(
        width: 20,
        thickness: 1,
        indent: 20,
        endIndent: 0,
        color: Colors.grey,
      ),

    try to add this code between two TabBars.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search