How to give a certain high to tab in tab bar

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.

THIS IS MY CODE

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