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

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

enter image description here

Answered By – Jinto Joseph

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *