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:
Solution 1: CopsOnRoad
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"),
]),
Solution 2: Mark Bell
Finally It worked for me
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 3: Abeer Iqbal
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,
),
)
],)
);
}
Solution 4: Willy Hystor
Here is the Header I want to achieve
Yea, so I added a var called rightDivider which lets you render divider but the last tab on my custom tab widget.
import 'package:flutter/material.dart';
class TabWidget extends StatelessWidget {
final String label;
final bool rightDivider;
TabWidget({
required this.label,
required this.rightDivider,
});
@override
Widget build(BuildContext context) {
return Container(
height: 32 + MediaQuery.of(context).padding.bottom,
width: double.infinity,
padding: EdgeInsets.all(0),
decoration: (rightDivider)
? BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.grey,
width: 1,
style: BorderStyle.solid,
),
),
)
: null,
child: Center(child: Text(label)),
);
}
}
And called this widget like this
TabBar(
controller: _tabController,
tabs: [
TabWidget(
label: 'Today',
rightDivider: true,
),
TabWidget(
label: 'Calendar',
rightDivider: true,
),
TabWidget(
label: 'Report',
rightDivider: false,
),
],
)
Solution 5: Wahab Khan Jadon
That's how I achieve this behavior...
HomeTab({required String title, bool isSeprator = true}) {
return Tab(
child: Container(
width: 100,
height: 20,
child: Center(
child: Text(title),
),
decoration: isSeprator
? BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.grey,
width: 1,
style: BorderStyle.solid,
),
),
)
: null,
),
);
}
isSeparator is to show separator or not ... because on the last index I am not showing...
Following is the list of tabs ...
List<Widget> _tabScroll() => [
HomeTab(title: "Tab1"),
HomeTab(title: "Tab2"),
HomeTab(title: "Tab3", isSeparator: false),
];
and following is the most important TabBar Code...
TabBar(
labelPadding: EdgeInsets.symmetric(horizontal: 0), //removing extra space
controller: _controller,
isScrollable: true,
indicatorColor: Colors.black,
indicatorSize: TabBarIndicatorSize.label,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 3.0), //hight of indicator
insets: EdgeInsets.symmetric(horizontal: 30.0), //give some padding to reduce the size of indicator
),
unselectedLabelColor: Colors.grey,
tabs: _tabScroll(), //list of tabs
),
The end result looks like this...
Solution 6: Elmar
Working solution is to create border for individual tabs. Tabs parameter actually accept other elements as a child. So you can use custom containers. That way you can control which side border you want to show (left, rigth or any side):
TabBar(
controller: _tabController,
indicator: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(0, 2.0),
)
],
color: Colors.white,
),
labelColor: Colors.red,
unselectedLabelColor: Colors.grey.shade900,
labelPadding: EdgeInsets.symmetric(horizontal: 1.0),
isScrollable: false,
tabs: [
Container(
child: Center(
child: Text('T1'),
),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.grey,
width: 2,
style: BorderStyle.solid,
),
),
)),
Container(
child: Center(
child: Text('T2'),
),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.grey,
width: 2,
style: BorderStyle.solid,
),
),
)),
Container(
child: Center(
child: Text('T3'),
),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.grey,
width: 2,
style: BorderStyle.solid,
),
),
)),
Tab(
text: 'T4',
),
],
),
