Flutter Get Status Bar Height

Status Bar is a small bar present in every mobile device at the top side. Basic use of status bar is to show user information about Battery usages and network connectivity status. In flutter device screen height is count with Status bar including. Because flutter Material App widget start drawing items always at the top side of screen. Some times in many cases we need to calculate the Status bar height and we can get this by using MediaQuery.of(context).padding.top function. It return us the height of Status bar in double format.

Flutter Get Status Bar Height:

1. Defining a function getStatusBar() in our main class. In this function we're using MediaQuery.of(context).padding.top method to get status bar height and printing result on Console window.

  getStatusBar(context) {
    double heightOfStatusBar = MediaQuery.of(context).padding.top;
    print("Status Bar Height = $heightOfStatusBar");
  }

2. Creating a button and calling above function.

ElevatedButton(
        style: ElevatedButton.styleFrom(
          fixedSize: const Size(180, 100),
          padding: const EdgeInsets.all(8.0),
          backgroundColor: Colors.red,
          textStyle: const TextStyle(
            fontSize: 21,
          ),
        ),
        onPressed: () => getStatusBar(context),
        child: const Text(
          'Get Status Bar Height',
          textAlign: TextAlign.center,
        ),
      ),

3. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  getStatusBar(context) {
    double heightOfStatusBar = MediaQuery.of(context).padding.top;
    print("Status Bar Height = $heightOfStatusBar");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          fixedSize: const Size(180, 100),
          padding: const EdgeInsets.all(8.0),
          backgroundColor: Colors.red,
          textStyle: const TextStyle(
            fontSize: 21,
          ),
        ),
        onPressed: () => getStatusBar(context),
        child: const Text(
          'Get Status Bar Height',
          textAlign: TextAlign.center,
        ),
      ),
    ))));
  }
}

Screenshot of App:

Output: