33

How do I get the status bar height?

enter image description here

4 Answers 4

90
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.

5
  • 1
    returns 0.0 on my mobile too
    – MetaStack
    May 13, 2022 at 21:35
  • 1
    return 0.0 on android device
    – omega_mi
    Sep 24, 2022 at 12:50
  • @omega_mi What MediaQuery.of(context).padding.top returns?
    – iDecode
    Sep 25, 2022 at 8:54
  • 1
    @iDecode both padding.top & viewPadding.top return 0.0
    – omega_mi
    Sep 26, 2022 at 3:40
  • @omega_mi 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. Mar 16 at 15:57
1

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

0

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.

3
  • 1
    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)
    – Benjamin
    Sep 29, 2022 at 9:54
  • 3
    I would not recommend adding a full-blown framework like GetX just for the sake of finding just the statusbar height. Jan 9 at 14:35
  • 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.
    – Asad Malik
    Jan 11 at 3:46
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.