I want to give borders between UN-selected tabs i tried this but not working. Border between around live so when i switch tabs it will look grey instead of empty space
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: lightGrey)),
child: TabBar(
indicator: BoxDecoration(
color: Colors.green,
border: Border.symmetric(
vertical: BorderSide(color: lightGrey),
)),
labelStyle: body14_500(Colors.white),
unselectedLabelStyle: body14_500(dark3),
indicatorColor: white,
labelPadding: EdgeInsets.symmetric(horizontal: 24),
unselectedLabelColor: dark3,
labelColor: Colors.white,
tabs: [
Tab(text: "Upcoming"),
Container(
decoration: BoxDecoration(
border: Border.symmetric(
vertical: BorderSide(color: lightGrey),
),),
child: Tab(text: "Live")),
Tab(text: "Completed"),
],
),
)
this is how it look
Expected this
this worked for me
tabs: [
Tab(text: "Upcoming"),
Tab(
child:Row(
MainAxisAlignment.spaceBetween,
children: <Widget>[
VerticalDivider(),
Text("Lives"),
VerticalDivider(),
]
),
),
Tab(text: "Completed"),
],
You can use CupertinoSegmentedControl to achieve this
CupertinoSegmentedControl<int>(
onValueChanged: (value) => setState(() => selectedIndex = value),
children: cupertinoMap,
padding: const EdgeInsets.all(12),
groupValue: selectedIndex,
selectedColor: Colors.green,
pressedColor: Colors.green.shade100,
unselectedColor: Colors.white,
borderColor: Colors.grey.shade300,
),
Full code at dartpad
Screenshot
Related
I want to make tapBar looking like this:
But only got this:
This is my code(DefaultTabContainer is wrapped with container with height: 600 and width: 300):
DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(35.h),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10.w),
decoration: BoxDecoration(
//color: const Color(0xFF1C1B20),
borderRadius: BorderRadius.circular(12),
),
child: TabBar(
controller: _tabController,
indicatorPadding:
const EdgeInsets.symmetric(vertical: 5),
indicator: const ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
color: Color(0xFF4F4E51),
),
labelColor: Colors.white,
physics: const NeverScrollableScrollPhysics(),
labelStyle: const TextStyle(
color: Colors.white,
fontSize: 12
),
tabs: const [
Tab(
text: "Day",
),
Tab(
text: "Week",
),
Tab(
text: "Month (Soon)",
),
]),
),
)
)
)
TabController in initState:
_tabController = TabController(vsync: this, length: numberTabs); // numberTabs = 3
I tried to make it like I want but I cannot and I don't understand why...
You can set each tabs as below
tabs:[
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.red,
),
child: Align(
alignment: Alignment.center,
child: Text(
"Day",
),
),
),
),]
I have a TabBar in the AppBar and a ListView in the TabBarView. When I scroll the list, the TabBar "vibrate". If you notice at the gif below, there actually appears a little white space at the bottom of AppBar, below the tabs. This space appears and disappears so fast that it gives an impression of vibration. I want the TabBar to be at the bottom of the AppBar with no space below the TabBar.
The code of AppBar:
_appBar(){
return PreferredSize(
preferredSize: Size.fromHeight(160),
child: AppBar(
toolbarHeight: 70,
backgroundColor: Colors.white,
shadowColor: Colors.black,
elevation: 7,
centerTitle: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(90.0),
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Container(
height: 40,
width: MediaQuery.of(context).size.width - 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(243, 243, 243, 1),
),
child: Center(
child: Form(
child: TextFormField(
controller: searchController,
autocorrect: false,
keyboardType: TextInputType.visiblePassword,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(right: 1, left: 14, top: 14, bottom: 14),
label: Text("Nome, nº de série"),
labelStyle: TextStyle(
fontFamily: "OpenSans",
fontSize: 16,
color: Color.fromRGBO(60, 60, 67, 0.6)
),
prefixIcon: Icon(Icons.search),
border: InputBorder.none,
floatingLabelBehavior: FloatingLabelBehavior.never,
),
),
),
),
),
SizedBox(height: 15),
TabBar(
controller: _tabController,
labelPadding: EdgeInsets.only(left: 5, right: 5),
indicatorColor: Theme.of(context).primaryColor,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 3.0,
labelColor: Colors.black,
labelStyle: TextStyle(
fontSize: 16,
fontFamily: "OpenSans"
),
tabs: const [
Tab(text: "RASCUNHOS"),
Tab(text: "EM PROCESSO"),
Tab(text: "FINALIZADO"),
]
)
],
),
),
),
),
);
}
I already removed the TabBar indicator decorations and the problem still happens.
I have a TabBar with tabs inside and when I click on a tab the vertical line(divider) overlays border of a tab(when I click on a tab there are white borders).
It looks like this:
This is how it looks like
This is my TabBar:
TabBar(
indicatorPadding: EdgeInsets.symmetric(vertical: 10),
indicator: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
side: BorderSide(color: Colors.white)),
color: Color(0xFF1C1B20),
),
labelColor: AppColors.whiteE3EAF6,
labelStyle: TextStyle(color: Colors.white),
labelPadding: const EdgeInsets.all(0),
tabs: [
_tab("1M",),
_tab("5M",),
_tab("15M",),
_tab("30M",),
Tab(text: "1H",),
]
)
And this is my custom _tab widget:
Widget _tab(String text) {
return Container(
height: 16,
padding: const EdgeInsets.all(0),
width: double.infinity,
decoration: const BoxDecoration(
border: Border(right: BorderSide(color: Color(0xFF454545), width: 1, style: BorderStyle.solid))),
child: Tab(
text: text,
),
);
}
I want to make this gray line invisible or make it white but I don't know how to fix that
First define new variable out of build method like this:
int selectedTap = 0;
then change your _tab to this:
Widget _tab(String text, int index) {
return Container(
height: 16,
padding: const EdgeInsets.all(0),
width: double.infinity,
decoration: BoxDecoration(
border: index == selectedTap
? null
: Border(
right: BorderSide(
color: Color(0xFF454545),
width: 1,
style: BorderStyle.solid),
)),
child: Tab(
text: text,
),
);
}
and use it like this:
TabBar(
indicatorPadding: EdgeInsets.symmetric(vertical: 10),
indicator: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
side: BorderSide(color: Colors.white)),
color: Color(0xFF1C1B20),
),
labelColor: AppColors.whiteE3EAF6,
labelStyle: TextStyle(color: Colors.white),
labelPadding: const EdgeInsets.all(0),
tabs: [
_tab("1M", 0),
_tab("5M", 1),
_tab("15M", 2),
_tab("30M", 3),
Tab(text: "1H",),
],
onTap: (index) {
setState(() {
selectedTap = index;
});
},
)
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
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)),
),
);
}
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)),
),
);
}
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)),
),
);
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:
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)),
),
);
}
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,
),
)
],)
);
}
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"),
]),
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,
),
],
)
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...
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',
),
],
),
Thats how i have done this
I am using screenutils package from pub you can also use it
SizedBox(
width: 342.w,
height: 41.h,
child: Material(
color: const Color(0xffE2E2E2),
borderRadius: BorderRadius.circular(5),
child: Padding(
padding: EdgeInsets.all(2),
child: TabBar(
padding: EdgeInsets.zero,
indicatorPadding: EdgeInsets.zero,
labelPadding: EdgeInsets.zero,
indicator: BoxDecoration(
color: Color(0xffFFFFFF),
// borderRadius: BorderRadius.circular(5.0)
),
labelColor: Colors.black,
unselectedLabelColor: Color(0xff999BA2),
tabs: [
Container(
width: 1.sw,
decoration: BoxDecoration(
// color: Colors.black,
border: Border(right: BorderSide(color: Colors.white))
),
child: Tab(
text: 'Call',
),
),
Container(
width: 1.sw,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.white))
),
child: Tab(
text: 'Missed Call',
),
// child: Tab(text: 'Phone',),
),
Container(
child: Tab(
text: 'No Call',
),
// child: Tab(text: 'No Call'),
),
],
),
),
),
)
enter image description here