Flutter - how can i set the height of a TabBar?

Question

I want to resize my TabBar because default height is too much, how can achieve it? Thanks.

DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
        bottom: TabBar(
          tabs: <Widget>[
            Text('Tab 1'),
            Text('Tab 2'),
          ],
        ),
      ),
      body: TabBarView(
        children: <Widget>[
          Icon(Icons.apps),
          Icon(Icons.apps),
        ],
      ),
    ),
  )

Does this answer your question? [How can I customize the TabBar indicator width and height?](https://stackoverflow.com/questions/44272440/how-can-i-customize-the-tabbar-indicator-width-and-height) — Ademir Villena Zevallos, Jan 08 '20 at 15:23
Is it the TabBar or the TabBarView that you want to adjust the height of? — J. S., Jan 08 '20 at 15:23

score 7 · Answer 1 · answered Oct 28 '20 at 08:37

7

For TabBar widget you can do as @praveenb suggested

child: TabBar(
  ...
  tabs: [
    SizedBox(
      height: 100,
      child: Tab(
      ...

answered Oct 28 '20 at 08:37

yehyatt

2,295
3
28
31

score 6 · Answer 2 · answered Jan 08 '20 at 21:16

You can use PreferredSize:

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            bottom: TabBar(
              tabs: <Widget>[
                Text('Tab 1'),
                Text('Tab 2'),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Icon(Icons.apps),
            Icon(Icons.apps),
          ],
        ),
      ),
    )

It will change overall height of the appbar but if you want to change the height of the tabbar only then apply the PreferredSize widget to the TabBar widget widget rather than applying it on the AppBar widget.

for TabBar widget PreferredSize not worked, but SizedBox(height: 58, child: //some widget ) worked for me. — praveenb, Aug 24 '20 at 20:56

score 0 · Answer 3 · answered Aug 23 '23 at 09:18

We can use height of Tab like this:

          TabBar(
            ...
            tabs: [
              Tab(
                text: '1',
                height: 32,
              ),
              Tab(
                text: '2',
                height: 32,
              ),
            ],
          )

Flutter - how can i set the height of a TabBar?

3 Answers3