I have 3 TabBars and I want to place the label to the left of the categories.
The TabBar I want:
My TabBar:
My code:
// BOTTOM
bottom: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 1.1,
child: TabBar(
labelPadding: EdgeInsets.all(0),
labelColor: Colors.white,
labelStyle: poppins.copyWith(
fontSize: 15,
fontWeight: bold,
),
unselectedLabelColor: Color(0xff585861),
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
// TABS
tabs: [
Tab(
text: 'Following',
),
Tab(
text: 'Trending',
),
Tab(
text: 'Search',
),
],
),
),
),
),
Refer below code and try to add isScrollable: true, inside TabBar() widget
Refer Tabbar here
Refer isScrollable here
bottom: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 1.1,
child: TabBar(
labelPadding: EdgeInsets.all(5),
labelColor: Colors.white,
isScrollable: true,// add this property
unselectedLabelColor: Color(0xff585861),
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
// TABS
tabs: [
Tab(
text: 'Following',
),
Tab(
text: 'Trending',
),
Tab(
text: 'Search',
),
],
),
),
),
),
Your result screen->
I'm able to find the solution to this.
Just by adding isScrollable: true parameter to TabBar() all tabs shrink to one side.
Without setting isScrollable: true all tabs items were taking all the space they have in the given widget.
bottom: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 1.1,
child: TabBar(
isScrollable: true,
labelPadding: EdgeInsets.all(0),
labelColor: Colors.white,
labelStyle: poppins.copyWith(
fontSize: 15,
fontWeight: bold,
),
unselectedLabelColor: Color(0xff585861),
indicatorColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
// TABS
tabs: [
Tab(
text: 'Following',
),
Tab(
text: 'Trending',
),
Tab(
text: 'Search',
),
],
),
),
),
)
Related
I have three tabs in my tabBar, a button icon and two texts. I want the icon to be smaller than the texts. But they are all the same width. I didn't find any property that seven this width inside tabBar.
In gray you can see what I wanted to decrease the width, is this possible?
Below is my code, where I tried to wrap the tabs in a container but I was not successful.
return TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.blue,
indicatorColor: Colors.blue,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Container(
color: Colors.purple,
width: widthScreen * .10,
child: Tab(
icon: Icon(
(CustomIcons.arrow_back),
size: 30,
),
),
),
Container(
color: Colors.amber,
width: widthScreen * .70,
child: Tab(text: 'TEST 1')),
Container(
color: Colors.red,
width: widthScreen * .70,
child: Tab(
text: 'TEST 2',
),
),
],
);
Include isScrollable: true, on TabBar.
return TabBar(
isScrollable: true, //this
labelColor: Colors.black,
unselectedLabelColor: Colors.blue,
indicatorColor: Colors.blue,
I'm trying to add TabBar in my Flutter application. I will use 5 tabs with long names. For now, I added them like this;
DefaultTabController(
length: 5, // length of tabs
initialIndex: 0,
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
Container(
child: TabBar(
labelColor: Color(0xffd17842),
unselectedLabelColor: Color(0xff52555a),
indicator: DotIndicator(
color: Color(0xffd17842),
distanceFromCenter: 16,
radius: 3,
paintingStyle: PaintingStyle.fill,
),
indicatorColor: Colors.transparent,
tabs: [
Tab(text: 'Cappuccino'),
Tab(text: 'Espresso'),
Tab(text: 'Latte'),
Tab(text: 'Espresso'),
Tab(text: 'Cappuccino'),
],
),
),
Container(
height: 250, //height of TabBarView
decoration: BoxDecoration(
border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
),
child: TabBarView(children: <Widget>[
Container(
child: Center(
child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 5', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
),
),
])
)
])
)
But the output is this;
I want it to act like Horizontal SingleChildScrollView with BouncingScrollPhysics with full long names. I can't fix it... Can you help me?
On your TabBar set isScrollable: true,
child: TabBar(
labelColor: Color(0xffd17842),
unselectedLabelColor: Color(0xff52555a),
indicatorColor: Colors.transparent,
isScrollable: true, // this
tabs: [
set isScrollable property to true
isScrollable: true
I solved the problem by reducing the space between tabs.
enter image description here
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 tried to use NestedScrollView but was unsuccessful, I don't know where I can put the tabbarview how can I use tabbarview in this code
my app looks like this:
SliverToBoxAdapter _buildRegionTabBar() { //brasil e mundo
return SliverToBoxAdapter(
child: DefaultTabController(
length: 2,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20.0),
height: 50.0,
decoration: BoxDecoration(
color: Colors.white24,
borderRadius: BorderRadius.circular(25.0),
),
child: TabBar(
indicator: BubbleTabIndicator(
tabBarIndicatorSize: TabBarIndicatorSize.tab,
indicatorHeight: 40.0,
indicatorColor: Colors.white,
),
labelStyle: Styles.tabTextStyle,
labelColor: Colors.black,
unselectedLabelColor: Colors.white,
tabs: <Widget>[
Tab (text:'Brasil'),
Tab (text:'Mundo'),
],
onTap: (index) {},
),
),
),
);
}
}
You're missing TabBarView.
This is how it should be done. Modify this code to achieve your result:
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.flight)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_car)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.flight, size: 350),
Icon(Icons.directions_transit, size: 350),
Icon(Icons.directions_car, size: 350),
],
),
),
);
For more info you can refer here : https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/
I want to make a top navigation bar with this effect, but it's very difficult to modify the default tab style of tabcontroller! Then I try to use container to modify it by myself. It's very simple, but the problem is that I can't support left and right swiping to switch pages. Because the gesture has been blocked by pageview. So in the end, I think it's better to use the tab provided by the system and then modify the style, some one help me!
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
),
),
);
The indicator property of TabBar can be used to achieve the look.
In your case, try this-
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: Container(
color: Colors.grey[200],
width: 200,
child:TabBar(
labelColor: Colors.red,
unselectedLabelColor: Colors.grey,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white),
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
),
),
);
my code is here
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: PreferredSize(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Color(0xfff0f4f7)),
width: 193,
height: 36,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: TabBar(
labelColor: ThemeColor,
unselectedLabelColor: MainTextColor,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white),
labelPadding: EdgeInsets.all(0),
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
width: 95,
child: Text(
"transfer_upload_list".tr,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),
)),
)),
Tab(
child: Container(
width: 95,
child: Text(
"transfer_download_list".tr,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),
),
)),
]),
)),
preferredSize: Size(193, 36),
)),
));