Solve Flutter App Content Above Status Bar UI Error

Hello friends, In today’s tutorial we would learn about a simple yet most common UI error in flutter. Most of beginner flutter developers when start practicing flutter then they see all the widgets they implements will automatically go above the status bar. The reason behind that is by default flutter app UI covers the whole screen including Status bar. This would help them to create full screen mobile apps. But sometimes developers wants to show the status bar and start designing app from below of it. To solve this UI error we have to use SafeArea WIDGET as our parent widget. This widget will automatically set padding or margin at the top side of app area and move app UI content just after the Status bar. So in this tutorial we would learn about Solve Flutter App Content Above Status Bar UI Error.

Contents in this project Solve Flutter App Content Above Status Bar UI Error :-

1. Below is the Example of code which give us the Error :-

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppHome(),
    );
  }
}

class AppHome extends StatefulWidget{
  @override
  _AppHomeState createState() => _AppHomeState();
}

class _AppHomeState extends State<AppHome> {
  @override
  Widget build(BuildContext context) { 
    return const Scaffold(
          body: Text("Hello World Text", 
             style: TextStyle(fontSize: 45)
            ),
       );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

home: AppHome(),

);

}

class AppHome extends StatefulWidget{

@override

_AppHomeState createState() => _AppHomeState();

}

class _AppHomeState extends State<AppHome> {

@override

Widget build(BuildContext context) {

return const Scaffold(

body: Text("Hello World Text",

style: TextStyle(fontSize: 45)

);

}

Screenshot of Error UI :-

2. Now we’re using SafeArea widget as our parent widget and you will see the UI error will be removed.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppHome(),
    );
  }
}

class AppHome extends StatefulWidget{
  @override
  _AppHomeState createState() => _AppHomeState();
}

class _AppHomeState extends State<AppHome> {
  @override
  Widget build(BuildContext context) { 
    return const Scaffold(
          body: SafeArea(
            child:Text("Hello World Text", 
             style: TextStyle(fontSize: 45)
            ),
          )
       );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

home: AppHome(),

);

}

class AppHome extends StatefulWidget{

@override

_AppHomeState createState() => _AppHomeState();

}

class _AppHomeState extends State<AppHome> {

@override

Widget build(BuildContext context) {

return const Scaffold(

body: SafeArea(

child:Text("Hello World Text",

style: TextStyle(fontSize: 45)

)

);

}

Screenshot without UI Error :-

As you can see the difference between both code. In the first code section we’re not using any parent widget. In the second code snipped we’re using SafeArea widget as our parent widget which will move the UI content below the Status bar.