Reputation: 2517
How to nest tab view as a child of column in flutter?
I don't want to add tabs as a child of app bar bottom
cause my tabs are not on top. It is somewhere in the body.
So I tried the above method & also I tried wrapping it inside a nested scaffold. Both of them seems not working.
Following is what I've tried.
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
child: Column(children: [
Container(
padding: EdgeInsets.all(10),
child: TextInput(
placeholder: 'Search',
leadingIcon: searchIcon,
),
),
DefaultTabController(
length: 3,
child: Column(
children: [
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
],
),
),
Upvotes: 1
Views: 414
Reputation: 2272
give a height to tabcontroller and then wrap tabbarview with expanded.
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
child: Column(children: [
Container(
height:10,
padding: EdgeInsets.all(10),
),
Container(
height:100,//add height as per your need
child:DefaultTabController(
length: 3,
child: Column(
children: [
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
Expanded(
child:TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
),
),
),
])))
Upvotes: 1