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

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

CodePudding user response：

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)),
  ),
 );
}

CodePudding user response：

Tabbar

 new TabBar(

      tabs: [
        _designTab('assets/icons/bottom_nav/User.png'),
        _designTab('assets/icons/bottom_nav/Note.png'),
        _designTab('assets/icons/bottom_nav/card.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),
    ),

Single Tab design using below function

Widget _designTab(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)),
),
);

CodePudding user response：

You can do it with decoration:

TabBar :

new TabBar(

          tabs: [
            _myTab('assets/icons/bottom_nav/Home.png'),
            _myTab('assets/icons/bottom_nav/Guys.png'),
            _myTab('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),
        ),

Our single tab would be:

 Widget _myTab(String imagePath) {
     return   Container(
              height: 50   MediaQuery
                  .of(context)
                  .padding
                  .bottom,
              padding: EdgeInsets.all(0),
              width: double.infinity,
              //---following decoration will add divider in between two tabs
              decoration:  BoxDecoration(border: Border(right: BorderSide(color: STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
              child: Tab(
                icon: ImageIcon(AssetImage(imagePath)),
              ),
            );
    }