How to give a certain high to tab in tab bar

Question

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.

THIS IS MY CODE

I want to achieve this

`

Answer 1

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