How to get the height of the AppBar and its padding in Flutter

In this post, we will go over the possible ways to find the height of the AppBar widget and its padding in Flutter. It is important to know these measurements to create designs that work well on different screens. By subtracting the height of the AppBar and its padding from the total screen height, we can figure out the remaining space for our layout.

Retrieve the height of the AppBar

To find the height of the AppBar in Flutter, there are two simple methods we can use. It is also good to know that as of now the default value for the AppBar widget is 56.0. However, I highly encourage you to always retrieve the height dynamically, let us have a look.

1. Using kToolBarHeight

The first approach is to get the height by using the kToolBarHeight constant, see the code below:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('kToolbarHeight: ${kToolbarHeight.toString()}'),
          ),
        ),
        body: SizedBox(),
      ),
    );
  }
}

In this code snippet, we display a Scaffold widget with an AppBar. In the AppBar we have a Text widget that shows the height of the AppBar by using the kToolBarHeight constant. As you can see the value is 56.0:

2. Using the AppBar widget

We can also directly access the height of the AppBar from the widget itself. By accessing the prefferedSize property of the AppBar, see the code below:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('preferredSize: ${AppBar().preferredSize.height}'),
          ),
        ),
        body: SizedBox(),
      ),
    );
  }
}

In this code snippet, instead of using the kToolBarHeight, we used the preferredSize property of the AppBar widget to get the height of the AppBar. As you can see the value is also 56.0:

Retrieve the top padding

As you might have noticed the AppBar widget, also has padding applied on top. If we want to know the exact remaining height we also need to subtract the top padding from the total height. Like getting the height of the AppBar, retrieving the padding on top is also very simple. We can retrieve it by using the MediaQuery class, see the code below:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('top padding: ${MediaQuery.of(context).padding.top}'),
          ),
        ),
        body: SizedBox(),
      ),
    );
  }
}

In this code snippet, we create a MediaQuery instance by using its of function. The of function requires a BuildContext so that we can retrieve the nearest MediaQuery. In the MediaQuery instance, we look at the padding property and focus on the top value. The top value tells us how much padding there is at the top of the screen:

Get the device's screen size

Now that we know how to get the height of the AppBar widget and its padding, we can also take a look at how to get the height and width of the overall screen. To go over the possible ways, I have written a separate post:

How to get the screen height and width dynamically in Flutter

Getting the screen size in Flutter can be very helpful when you want to adjust your widget dynamically to the screen size of the user’s device. Fortunately, Flutter provides a straightforward way to get the width and height of the screen.

Code OnwardsTijn van den Eijnde

Conclusion

It is important to know how to find the height of the AppBar widget and its padding in Flutter for responsive design. By subtracting the AppBar's height and top padding from the total screen height using the MediaQuery class, you can determine the available space for your layout. You can get the height dynamically using kToolBarHeight or directly accessing it with AppBar().preferredSize.height. To find the top padding, you can use MediaQuery.of(context).padding.top.