I'm trying to create a tab bar at the center of the screen using flutter while trying it I gave TabBarView in a column and I was stuck in this error. Please resolve this.
I/flutter ( 3983): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3983): The following assertion was thrown during performResize():
I/flutter ( 3983): Horizontal viewport was given unbounded height.
I/flutter ( 3983): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter ( 3983): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter ( 3983): vertical space in which to expand.
The source code is
class profilePage extends StatefulWidget {
@override
profilePageState createState() => profilePageState();
}
class profilePageState extends State<profilePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Container(
child: Column(crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 40,
),DefaultTabController(
length: 2,
child: Column(children: [TabBar(
unselectedLabelColor: Colors.black,
labelColor: Colors.red,
tabs: <Widget>[
Tab(
icon: Icon(Icons.people),
),
Tab(
icon: Icon(Icons.person),
)
],controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),TabBarView(
children: <Widget>[Text('people'), Text('Person')],
controller: _tabController,
),
]),
),
],
),
),
],
),
);
}
}
You can see the above model of the image what I'm trying to achieve. I've tried many things but I've stuck here.
How to rectify this error and how to create a tab bar at the center of my screen?
I added a demo of what you are trying to get (I followed the Image you posted):
NOTE : I had to make few changes to the way you arranged your widget tree.
class profilePage extends StatefulWidget {
@override
profilePageState createState() => profilePageState();
}
class profilePageState extends State<profilePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text(
'My Profile',
),
centerTitle: true,
backgroundColor: Colors.grey[700].withOpacity(0.4),
elevation: 0,
// give the app bar rounded corners
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
leading: Icon(
Icons.menu,
),
),
body: Column(
children: <Widget>[
// construct the profile details widget here
SizedBox(
height: 180,
child: Center(
child: Text(
'Profile Details Goes here',
),
),
),
// the tab bar with two items
SizedBox(
height: 50,
child: AppBar(
bottom: TabBar(
tabs: [
Tab(
icon: Icon(Icons.directions_bike),
),
Tab(
icon: Icon(
Icons.directions_car,
),
),
],
),
),
),
// create widgets for each tab bar here
Expanded(
child: TabBarView(
children: [
// first tab bar view widget
Container(
color: Colors.red,
child: Center(
child: Text(
'Bike',
),
),
),
// second tab bar viiew widget
Container(
color: Colors.pink,
child: Center(
child: Text(
'Car',
),
),
),
],
),
),
],
),
),
);
}
}
OUTPUT:
To put the TabBar
at the center of the screen, your Profile Container's height should be the screen height divided by 2
Like this
class profilePage extends StatefulWidget {
@override
profilePageState createState() => profilePageState();
}
class profilePageState extends State<profilePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height /2,
child: Center(child: Text("Profile"),),
color: Colors.blue,
),
TabBar(
unselectedLabelColor: Colors.black,
labelColor: Colors.red,
tabs: [
Tab(
icon: Icon(Icons.people),
),
Tab(
icon: Icon(Icons.person),
)
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
Expanded(
child: TabBarView(
children: [Text('people'), Text('Person')],
controller: _tabController,
),
),
],
),
),
);
}
}
Also can try this,
AppBar(
leading: IconButton(
constraints: BoxConstraints(),
padding: EdgeInsets.zero,
icon: Container(
padding: EdgeInsets.fromLTRB(10, 5, 0, 5),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(20)),
// color: MyColors.primaryColorLight.withAlpha(20),
color: Colors.white,
),
child: Icon(
Icons.arrow_back_ios,
color: kPrimaryColor,
// size: 16,
),
),
onPressed: () => Navigator.of(context).pop(),
),
backgroundColor: kPrimaryColor,
toolbarHeight: 80,
elevation: 5.0,
title: TabBar(//Add tab bar to title
indicator: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30)),
color: Colors.white),
labelColor: kPrimaryColor,
unselectedLabelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
tabs: [
Container(
height: 30.0,
width: 100,
child: Tab(
child: Align(
alignment: Alignment.center,
child: Text(
"Ongoing",
style: TextStyle(fontSize: 16),
),
),
),
),
Container(
width: 100,
height: 30.0,
child: Tab(
child: Align(
alignment: Alignment.center,
child: Text(
"Requests",
style: TextStyle(fontSize: 16),
),
),
),
),
],
),
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.