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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our app’s main MyApp class using void main runApp() function.
|
1 |
void main() => runApp(MyApp()); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
class GetStatusBarHeight extends StatelessWidget { @override Widget build(BuildContext context) { double statusBarHeight = MediaQuery.of(context).padding.top; return Text('Status Bar Height = ' + statusBarHeight.toString(), style: TextStyle(fontSize: 30)); } } |
4. Creating our main MyApp class extends with State less widget. We would call our class directly here to display status bar height.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: GetStatusBarHeight() ) ) ); } } |
5. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class GetStatusBarHeight extends StatelessWidget { @override Widget build(BuildContext context) { double statusBarHeight = MediaQuery.of(context).padding.top; return Text('Status Bar Height = ' + statusBarHeight.toString(), style: TextStyle(fontSize: 30)); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: GetStatusBarHeight() ) ) ); } } |
Screenshot in Android device:
Does not work in case of SafeArea widget presence.
Thanks for telling us 🙂 .
very nice