[Solved] Widgets Overlapping Below Status Bar in Flutter

In this post, we are going to show you how to solve widgets overlapping below the status bar. This may happen when you haven't added appbar into Scaffold() widget but have constructed the widget tree into the body attribute. See the solution below:

Issue: Widgets content overlapping below the status bar

When you add widgets into Scaffold() widget, the overlapping of widgets and status bar may look like the below:

Code with issue:

Scaffold(
  body: Text("Hello World", 
      style: TextStyle(fontSize: 40)
    )
)

Solution to this issue:

To solve this issue, you have to wrap your widget body with SafeArea():

SafeArea(
   child: //your widget tree here
)

For example: 

Scaffold(
  body: SafeArea(
    child:Text("Hello World", 
      style: TextStyle(fontSize: 40)
    ),
  )
);

Output after wrapping widgets with SafeArea():

Full Code Example:

import 'package:flutter/material.dart';
Future<void> main() async {
  runApp(MyApp());
}

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

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

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

In this way, you can fix the widgets tree overlapping below status bar in Flutter.