CODEWITHSUNDEEP
flutter
rafitajaen
rafitajaen

Reputation: 469

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

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),
        ],
      ),
    ),
  )

Upvotes: 8

Views: 9025

Answers (3)

Cương Nguyễn
Cương Nguyễn

Reputation: 1035

We can use height of Tab like this:

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

Upvotes: 3

yehyatt
yehyatt

Reputation: 2414

For TabBar widget you can do as @praveenb suggested

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

Upvotes: 8

shubhgkr
shubhgkr

Reputation: 471

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.

Upvotes: 6

Related Questions