Change height of AppBar

Question

I am developing a Flutter app. In this app I have used TabBarController in app bar. I am not using icons and title for AppBar so height is showing me more than expectation. I need help to do this with desired size. I am using following code:

class Dashboard extends StatefulWidget{
  @override
  State createState() => new _DashboardState();
}

class _DashboardState extends State with SingleTickerProviderStateMixin{

  final List myTabs = [
    new Tab(text: 'page1.',),
    new Tab(text: 'page2.'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          indicatorSize:TabBarIndicatorSize.tab,
          controller: _tabController,
          tabs: myTabs,
          labelStyle: styleTabText,

        ),
      ),
      body:  new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(
              child: new Text(
                  tab.text
              )
          );
        }).toList(),
      ),
    );
  }
}

Also for reference I am adding screenshot of app.

user_81108 · Answer

You can use PreferredSize to adjust the TabBar's height:

  @override
  Widget build(BuildContext context) {

    TabBar _tabBar = new TabBar(
      indicatorSize:TabBarIndicatorSize.tab,
      controller: _tabController,
      tabs: myTabs,
      labelStyle: styleTabText,
    );

    return Scaffold(
      appBar: new AppBar(
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(_tabBar.preferredSize.height - 50),
          child: _tabBar,
        ),
      ),

      // (...)

    );
  }

user_6618622 · Answer

Use toolbarHeight:

AppBar(
  toolbarHeight: 44, 
  // ...
)

user_14762762 · Answer

The easiest way is to use toolbarHeight property in your AppBar

Example :

AppBar(
   title: Text('Flutter is great'),
   toolbarHeight: 100,
  ),

Output:

Change height of AppBar

3 Answers