Flutter: Setting the height of the AppBar

How can I simply set the height of the AppBar in Flutter?

The title of the bar should be staying centered vertically (in that AppBar).


You can use PreferredSize:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

You can use PreferredSize and flexibleSpace for it:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

This way you can keep the elevation of AppBar for keeping its shadow visible and have custom height, which is what I was just looking for. You do have to set the spacing in SomeWidget, though.


Use toolbarHeight:

enter image description here


There's no longer a need to use PreferredSize. Use toolbarHeight with flexibleSpace.

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)

The easiest way is to use toolbarHeight property in your AppBar

Example :

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

You can add flexibleSpace property in your appBar for more flexibility

Output:

enter image description here

For more controls , Use the PreferedSize widget to create your own appBar

Example :

appBar: PreferredSize(
     preferredSize: Size(100, 80), //width and height 
          // The size the AppBar would prefer if there were no other constraints.
     child: SafeArea(
       child: Container(
         height: 100,
         color: Colors.red,
         child: Center(child: Text('Fluter is great')),
       ),
     ),
),

Don't forget to use a SafeArea widget if you don't have a safeArea

Output :

enter image description here