Add vertical line as a divider in tabbar as a divider
4,905
Solution 1
Finally It worked for me
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 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)),
),
);
}
Solution 2
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,
),
)
],)
);
}
Author by
Atieh mn
Updated on December 11, 2022Comments
-
Atieh mn over 1 year
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: