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
Related
I am trying to navigate the section on the same page when the button is clicked but I can not do it using PageView and Scroll, Does anyone know how to do it?
This is the navigation bar on the top of the page and I want it to go to specific section on the same page when the button is clicked.
this is my code:
Row(
children: [
NavItem(
title: 'Home',
onPreesed: () {},
color: KprimaryColor,
fontWeight: FontWeight.w900,
),
NavItem(
title: 'About',
onPreesed: () {},
color: Colors.black,
fontWeight: FontWeight.normal,
),
NavItem(
title: 'Projects',
onPreesed: () {},
color: Colors.black,
fontWeight: FontWeight.normal,
),
NavItem(
title: 'Contact',
onPreesed: () {},
color: Colors.black,
fontWeight: FontWeight.normal,
),
Please, try this!
class MyAppTabView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text('Flutter Tabs', style: TextStyle(color: Colors.black)),
bottom: const PreferredSize(
preferredSize: Size.fromHeight(40),
child: Align(
alignment: Alignment.centerRight,
child: TabBar(
isScrollable: true,
unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
unselectedLabelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.label,
indicatorColor: Colors.transparent,
labelColor: Colors.red,
labelStyle: TextStyle(fontWeight: FontWeight.bold),
tabs: [
Tab(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text("Home"),
),
),
),
Tab(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text("About"),
),
),
),
Tab(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text("Projects"),
),
),
),
Tab(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text("Contact"),
),
),
),
]),
),
),
),
body: TabBarView(
children: [
Center(child: Text("Home")),
Center(child: Text("About")),
Center(child: Text("Projects")),
Center(child: Text("Contact")),
],
),
),
),
);
}
}
Enjoy Coding!!
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',
),
],
),
),
),
)
I'm using a Nestedscrollview on my application that have multiple tabs,
now the problem is:
Whenever I scroll down or up on one of my tabs the other tabs also scrolls down or up, is there a way to avoid this behavior?
thanks
There is my code
return Scaffold(
body: DefaultTabController(
length: 5,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
floating: true,
snap: true,
pinned: true,
title: Text(
'MyApp',
style: GoogleFonts.cookie(
textStyle: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
actions: <Widget>[
Search(),
IconButton(
icon: Icon(Icons.home_rounded),
iconSize: 25,
onPressed: () {
Navigator.of(context).pushNamed(FeedScreen.routeName);
},
color: Colors.white,
),
],
backgroundColor: Theme.of(context).colorScheme.secondary,
bottom: TabBar(
labelColor: Colors.amber,
labelStyle: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
isScrollable: true,
tabs: myTabs,
),
),
];
},
body: TabBarView(
children: [
EducationScreen(),
FamilleScreen(),
SportsScreen(),
InfosScreen(),
PolitiqueScreen(),
],
),
),
),
);
NestedScrollView is the child and TabBarView is under it. Means every child is effected by same NestedScrollView that's why you are getting the same scroll position on every tab, You need to apply scrollable functionality on TabBarView's children.
You can simply follow this widget.
return DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text(
'MyApp',
style: GoogleFonts.cookie(
textStyle: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.home_rounded),
iconSize: 25,
onPressed: () {},
color: Colors.white,
),
],
backgroundColor: Theme.of(context).colorScheme.secondary,
bottom: TabBar(
labelColor: Colors.amber,
labelStyle: TextStyle(
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
isScrollable: true,
tabs: List.generate(5, (index) => Text("tab $index")),
),
),
body: TabBarView(
children: [
...List.generate(
5,
(index) => SingleChildScrollView( // you can choose `CustomScrollView` for better
child: Container(
color: index.isEven ? Colors.green : Colors.cyanAccent,
child: Column(
children: [
...List.generate(
44,
(y) => Container(
height: 100,
child: Text("tab $index item $y"),
))
],
),
),
),
)
],
),
),
);
}
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),
)),
));
I have SliverAppBar that scrolls inside CustomScroll view, I realized once I added in text and begin to scroll the bottom of the SliverAppBar begins to overflow.
The behavior that I want is that immediately when I start scrolling the Sliver App Bar must begin to start scrolling too so there's no overflow. (The distance between the app bar and the Tabbar must always be constant)
As you can see in the give, theres overflow once I begin to scroll over the text.
Here is what I mean.
Build method:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: NestedScrollView(
controller: _scrollViewController,
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.green,
pinned: true,
floating: true,
expandedHeight: 400,
forceElevated: boxIsScrolled,
flexibleSpace: Column(
children: <Widget>[
Stack(
alignment: Alignment.center,
overflow: Overflow.visible,
children: <Widget>[
Image(
fit: BoxFit.cover,
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width,
image: NetworkImage(
'https://image.freepik.com/free-photo/soccer-field-spotlight-background-stadium_46250-1363.jpg'),
),
Positioned(
width: MediaQuery.of(context).size.width,
bottom: -75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 45),
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: '22K',
style: TextStyle(
fontSize: 20,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
TextSpan(text: '\n'),
TextSpan(
text: 'Connections',
style: TextStyle(color: Colors.black87),
),
],
),
textAlign: TextAlign.center,
style: DefaultTextStyle.of(context).style,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: Image(
width: 130,
height: 130,
image: NetworkImage(
'https://lookyourbestbeyourbest.files.wordpress.com/2011/11/image-3.jpeg',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 45),
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: '12K',
style: TextStyle(
fontSize: 20,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
TextSpan(text: '\n'),
TextSpan(
text: 'Connections',
style: TextStyle(color: Colors.black87),
),
],
),
textAlign: TextAlign.center,
style: DefaultTextStyle.of(context).style,
),
),
],
),
),
],
),
SizedBox(
height: 85,
),
Container(
child: RichText(
text: TextSpan(
text: 'John Dory',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
),
],
),
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Example page",
icon: Icon(Icons.help),
)
],
controller: _tabController,
),
)
];
},
body: TabBarView(
children: <Widget>[
PageOne(),
PageTwo(),
],
controller: _tabController,
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.control_point),
onPressed: () {
_tabController.animateTo(1,
curve: Curves.bounceInOut, duration: Duration(milliseconds: 10));
_scrollViewController
.jumpTo(_scrollViewController.position.maxScrollExtent);
},
),
);
}
}
Sorry it so much code.
Thank you