How to get status bar height in Flutter?

Question

How do I get the status bar height?

Belonging

Answer 1

var height = MediaQuery.of(context).viewPadding.top;

Note: This will only work on mobile devices because other platforms don't have a dedicated status bar and it will returns 0.0 for them.

Belonging

returns 0.0 on my mobile too – Vaporetto

return 0.0 on android device – Gynandry

@Gynandry What MediaQuery.of(context).padding.top returns? – Belonging

@Belonging both padding.top & viewPadding.top return 0.0 – Gynandry

@Gynandry it will return a different value depending on the device. For example the iPhone 14 has a space for the camera at the top. viewPadding will account for this. – Writer

Answer 2

IDK why but in some cases we lose the MediaQuery data on the leafs of our WidgetTree. Try to get the MediaQuery using the same context of your Scaffold and it should work

Marlenamarlene

Answer 3

EDIT : window is now deprecated (and seem to have been deprecated even before this answer was initially posted 👀) so this answer is invalid after Flutter 3.7.0

MediaQuery is cool, but if you don't have access to a BuildContext you can use window.viewPadding.top directly, where window comes from dart:ui:

import 'dart:ui';

final statusBarHeight = window.viewPadding.top;

Note: As stated in the Dart documentation, this can include other things than the status bar so be careful when using these APIs

Hittite

Unfortunately, window deprecated( – Anatomical

Answer 4

Even though it has been answered, for those who will come along in the future, there is a very good YouTube video straight from in the comment section of Media_Query.dart that explains Differences between viewInsets, padding and viewPadding

It helped me understand which is which and when viewPadding gets the status bar height and when it does not.

Boustrophedon

Answer 5

Hope it will help you, just add latest GetX package in your application and import following library in your code.

import 'package:get/get.dart';

Status Bar Height

To get status bar height use following a bit code:

Get.statusBarHeight;

Bottom Bar Height

To get bottom bar height use following a bit code:

Get.bottomBarHeight;

Screen Height

To get screen height use following a bit code:

Get.height;

Screen Width

To get screen width use following a bit code:

Get.width;

Also you can use SafeArea() widget to ignore overlays to use this just wrap your widget with this.

Istic

I have noticed Get. statusBarHeight will NOT return the same as MediaQuery.of(context).viewPadding.top. Rather it returns a computed calculation of status bar height + AppBar height (off by a few pixels BTW) – Preconception

I would not recommend adding a full-blown framework like GetX just for the sake of finding just the statusbar height. – Sauers

This is just for those who are using getx in their code for other I mentioned in my answer that also you may use safearea and mediaquery. – Istic