How to get AppBar height in Flutter?

Solution 1:

This is not an ideal way, I think, but it will work.

Firstly declare the AppBar widget that you will use in your Scaffold.

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

Now you can get the height of your appBar using its preferredSized:

double height = appBar.preferredSize.height;

You can use this height to reduce from the screen height.

final double height = MediaQuery.of(context).size.height;

Solution 2:

you can use this :

var height = AppBar().preferredSize.height;

this way is very sample and easy

Solution 3:

There is no need to store the AppBar instance, or to create a dummy one to get the height. Also, AppBar.preferredSize will always return the same value of 56.0, which is the standard of Material Design, and this value will not be always usable for some cases (it lacks the height of the status bar for example).

Since an AppBar is surely used with a Scaffold, IMHO, the smarter way to get the real AppBar height (the distance between the top of the device and the top of the Scaffold body) is to use:

double height = Scaffold.of(context).appBarMaxHeight;

With this, the computed height will include (independently of the platform):

• The status bar height
• The app bar height
• The bottom app bar widget height if any (ex. TabBar)

Hope this will help!