Introduction

In Flutter, "AppBar height" can mean two different things: the height of the app bar widget itself, or the total vertical space occupied at the top of the screen including the status bar inset. The right answer depends on which measurement your layout actually needs.

For most cases, Flutter already exposes the size directly. You usually do not need to measure rendered pixels manually with a GlobalKey.

Default Material App Bar Height

Flutter exposes the default Material toolbar height as kToolbarHeight:

1import 'package:flutter/material.dart';
2
3void main() {
4  print(kToolbarHeight); // 56.0
5}

This is a useful constant when you want the default toolbar height and you know the app bar has not been customized.

Read the Height From the AppBar Itself

AppBar implements PreferredSizeWidget, so you can read its preferred height directly:

1import 'package:flutter/material.dart';
2
3final appBar = AppBar(
4  title: const Text('Demo'),
5);
6
7print(appBar.preferredSize.height);

This is better than hardcoding 56.0 because it also works when the app bar uses a custom toolbarHeight:

1final appBar = AppBar(
2  toolbarHeight: 72,
3  title: const Text('Custom'),
4);
5
6print(appBar.preferredSize.height); // 72.0

If your question is about the widget's own height, this is usually the correct API.

Include the Status Bar When You Need Total Top Space

Sometimes the real question is not "how tall is the app bar widget" but "how much top space is occupied on screen." In that case, add the top system inset from MediaQuery:

double totalTopHeight(BuildContext context, AppBar appBar) {
  return MediaQuery.of(context).padding.top + appBar.preferredSize.height;
}

Usage inside a widget:

1class DemoPage extends StatelessWidget {
2  DemoPage({super.key});
3
4  final AppBar appBar = AppBar(title: const Text('Demo'));
5
6  @override
7  Widget build(BuildContext context) {
8    final totalHeight =
9        MediaQuery.of(context).padding.top + appBar.preferredSize.height;
10
11    return Scaffold(
12      appBar: appBar,
13      body: Center(
14        child: Text('Top occupied height: $totalHeight'),
15      ),
16    );
17  }
18}

That top padding varies across devices, especially on phones with notches or different system UI insets.

Custom Top Bars Should Expose preferredSize

If you build your own app-bar-like widget, implement PreferredSizeWidget so the height is explicit and discoverable:

1import 'package:flutter/material.dart';
2
3class MyTopBar extends StatelessWidget implements PreferredSizeWidget {
4  const MyTopBar({super.key});
5
6  @override
7  Size get preferredSize => const Size.fromHeight(80);
8
9  @override
10  Widget build(BuildContext context) {
11    return AppBar(
12      toolbarHeight: 80,
13      title: const Text('Custom'),
14    );
15  }
16}

That lets Scaffold and any measurement code use the same size contract.

When Manual Measurement Is Actually Needed

You usually do not need post-layout measurement for a normal app bar. Manual measurement makes sense only when:

• the header animates to different sizes dynamically
• the widget is not a PreferredSizeWidget
• you need the final rendered geometry after layout

For standard AppBar usage, preferredSize and MediaQuery are simpler and less fragile.

Common Pitfalls

The most common mistake is confusing kToolbarHeight with the total occupied top space. kToolbarHeight does not include the status bar inset.

Another common issue is hardcoding 56.0 even though the app bar uses a custom toolbarHeight or a custom preferred size.

Developers also sometimes create a new AppBar instance just for measurement while rendering a different one. If the properties differ, the measured height and the displayed height will not match.

Finally, avoid manual render-object measurement unless the header is genuinely dynamic. Flutter already gives you the size model for standard app bars.

Summary

• Use kToolbarHeight when you only need the default Material toolbar height.
• Use appBar.preferredSize.height for the actual app bar widget height.
• Add MediaQuery.of(context).padding.top when you need total top occupied space.
• Custom header widgets should implement PreferredSizeWidget.
• Manual layout measurement is rarely necessary for a normal Flutter app bar.