Issue
I am trying to achieve this result for the tab bar in a flutter that shows the selected and unselected tabs, my problem is here that I cannot give a certain height to tabs can you help me please.
I want to achieve this
`
Solution
please check my example
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(children: [
TabBar(
tabs: [
Container(
width: 200,
height: 200,
color: Colors.amber,
child: Icon(Icons.directions_car)),
Container(
width: 200,
height: 200,
color: Colors.black,
child: Icon(Icons.directions_transit)),
Container(
width: 200,
height: 200,
color: Colors.red,
child: Icon(Icons.directions_bike)),
],
),
Container(
height: 500,
width: MediaQuery.of(context).size.width,
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
))
]))));
}
here don’t use Tab widget inside the TabBar
because it has some default property ,instead of using Tab inside the tab bar ,use Container
like this way
TabBar(
tabs: [
Container(
width: 200,
height: 200,
color: Colors.amber,
child: Icon(Icons.directions_car)),
Container(
width: 200,
height: 200,
color: Colors.black,
child: Icon(Icons.directions_transit)),
Container(
width: 200,
height: 200,
color: Colors.red,
child: Icon(Icons.directions_bike)),
],
),
using this way , you can achieve it , if you want change color or etc … according to selection use index of TabController
and index
and also all property of TabBar
will work this way too
out put will be
Answered By – Jinto Joseph
Answer Checked By – Cary Denson (FlutterFixes Admin)