Flutter Setting the height of the AppBar

Question

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

User · Answer

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   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

User · Answer

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

User · Answer

Use toolbarHeight    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

User · Answer

At the time of writing this  I was not aware of PreferredSize  Cinn s answer is better to achieve this   You can create your own custom widget with a custom height   import  package flutter material dart    class Page extends StatelessWidget      override   Widget build BuildContext context        return new Column children    lt Widget gt  new CustomAppBar  Custom App Bar    new Container               class CustomAppBar extends StatelessWidget      final String title    final double barHeight   50 0     change this for different heights     CustomAppBar this title       override   Widget build BuildContext context        final double statusbarHeight   MediaQuery          of context           padding          top       return new Container        padding  new EdgeInsets only top  statusbarHeight         height  statusbarHeight   barHeight        child  new Center          child  new Text            title            style  new TextStyle fontSize  20 0  fontWeight  FontWeight bold

User · Answer

Cinn s answer is great  but there s one thing wrong with it  The PreferredSize widget will start immediately at the top of the screen  without accounting for the status bar  so some of its height will be shadowed by the status bar s height  This also accounts for the side notches  The solution  Wrap the preferredSize s child with a SafeArea appBar  PreferredSize      Here is the preferred height    preferredSize  Size fromHeight 50 0     child  SafeArea      child  AppBar        flexibleSpace                      If you don t wanna use the flexibleSpace property  then there s no need for all that  because the other properties of the AppBar will account for the status bar automatically

User · Answer

In addition to  Cinn s answer  you can define a class like this  class MyAppBar extends AppBar with PreferredSizeWidget      override   get preferredSize   gt  Size fromHeight 50      MyAppBar  Key key  Widget title     super      key  key      title  title         maybe other AppBar properties          or this way  class MyAppBar extends PreferredSize     MyAppBar  Key key  Widget title     super      key  key      preferredSize  Size fromHeight 50       child  AppBar        title  title           maybe other AppBar properties                 and then use it instead of standard one

User · Answer

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

User · Answer

You can use the toolbarHeight property of Appbar  it does exactly what you want

User · Answer

If you are in Visual Code  Ctrl   Click on AppBar function   Widget demoPage       AppBar appBar   AppBar      title  Text  Demo           return Scaffold      appBar  appBar      body         page body                    And edit this piece   app bar dart will open and you can find      preferredSize   new Size fromHeight kToolbarHeight    bottom  preferredSize  height    0 0       Difference of height

[dart] Flutter: Setting the height of the AppBar

The easiest way is to use `toolbarHeight` property in your AppBar

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

Examples related to dart

Examples related to material-design

Examples related to flutter