Get Status Bar Height in Flutter Android iOS App Example Tutorial

Status bar is a horizontal graphical bar present at top of mobile application screen. Status bar is used to display important information like time, network connectivity, batter information etc. In flutter application by default the app layout starts from Status bar. So if you will starting making application without App Bar you’ll see your layout design starts just above the Status bar. There is a widget available to resolve this issue named as SafeArea. But sometimes app developer needs to find the device Status bar height in order to make some adjustments. We can find Status Bar height using MediaQuery.of(context).padding.top method. So in this tutorial we would Get Status Bar Height in Flutter Android iOS App Example Tutorial.

Contents in this project Get Status Bar Height in Flutter Android iOS App Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Call our app’s main MyApp class using void main runApp() function.

3. Create a class named as GetStatusBarHeight extends with State less widget. As you can see in below code we are getting Status bar height using MediaQuery.of(context).padding.top function and storing the height in double variable.

Note: MediaQuery did not work outside the Material App widget so we have to define it in another class and call this class in our main class like a widget.

4. Creating our main MyApp class extends with State less widget. We would call our class directly here to display status bar height.

5. Complete source code for main.dart file:

Screenshot in Android device:

Get Status Bar Height in Flutter Android iOS App Example Tutorial

Screenshot in iOS device:

3 Comments

  1. Vladimir E. Koltunov

    Does not work in case of SafeArea widget presence.

Leave a Reply

Your email address will not be published.