'How to give a certain high to tab in tab bar

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

I want to achieve this `

Solution 1:^[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

Solution 2:^[2]

you have to set the height of the tab based on your requirement with MediaQuery

Solution 3:^[3]

Tab comes with height property, you can use it to provide height for tab.

Tab( height: 100,...)

If height is null, the height will be calculated based on the content of the Tab. When icon is not null along with child or text, the default height is 72.0 pixels. Without an icon, the height is 46.0 pixels.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Sneha G Sneha
Solution 3	Yeasin Sheikh

'How to give a certain high to tab in tab bar

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]