How to add divider between two tab in tab bar -Flutter

754
new 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

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)),
  ),
 );
}
Share:
754
Dipak Ramoliya
Author by

Dipak Ramoliya

Updated on January 03, 2023

Comments

  • Dipak Ramoliya
    Dipak Ramoliya over 1 year

    I want to add divider between two tab but I don't know how to do it

    I attach example how I want to add divider in tab bar

    enter image description here