How to get AppBar height in Flutter

In Flutter, you can obtain the height of an AppBar using several methods. The height of an AppBar is not fixed; it may vary depending on the device and design requirements. Below are some methods and examples to obtain the AppBar height:

1. Using PreferredSizeWidget

When you use AppBar as a PreferredSizeWidget, you can directly obtain the height from the AppBar's preferredSize property.

dart
AppBar appBar = AppBar(
  title: Text('Example AppBar'),
);

double appBarHeight = appBar.preferredSize.height;

Here, appBarHeight will obtain the AppBar's height.

2. Using GlobalKey

If you need to obtain the AppBar's dimensions at runtime, you can use GlobalKey to access its context, and then use renderBox.size to get the dimensions.

dart
final GlobalKey appBarKey = GlobalKey();

AppBar appBar = AppBar(
  key: appBarKey,
  title: Text('Example AppBar'),
);

// Later, you can obtain the height after the layout is built
void printAppBarHeight() {
  final RenderBox renderBox = appBarKey.currentContext.findRenderObject();
  final size = renderBox.size;
  print('AppBar height: ${size.height}');
}

In this example, you need to ensure that printAppBarHeight() is called after the layout is built, for example, within WidgetsBinding.instance.addPostFrameCallback.

3. Using Theme Data

If you don't have direct access to the AppBar instance or you want to obtain the default AppBar height, you can retrieve it using theme data.

dart
double appBarHeight = Theme.of(context).appBarTheme.height ?? kToolbarHeight;

Here, the ?? operator is used to handle possible null cases, where kToolbarHeight is the default height constant for an AppBar.

Summary

The above methods can be chosen based on different scenarios. If you have already determined the AppBar size during design, the first method is the simplest and most direct. If you need to dynamically obtain or detect the AppBar size at runtime, the second method using GlobalKey is more suitable. The third method is applicable for those who want to obtain the default AppBar height or configure the AppBar through theme.