By WalkingTree   April  03, 2020

SafeArea - A Flutter Widget

Everything within a Flutter app is a Widget. From the simple ‘text’ to ‘buttons’ to ‘screen layouts’. These widgets arrange in a hierarchical order to be displayed onto the screen. They describe how your app view should look like with their current configuration and state.

Whenever you are going to code for building anything in Flutter, it will be inside a widget. 

We’ll be taking a look at some of these very useful widgets, starting with SafeArea.

What exactly SafeArea widget does?

Mobile devices no longer come in rectangle shape. Different corners and notches make it a bit tricky to design an application. SafeArea is a widget that inserts its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child to avoid the status bar at the top of the screen. Let’s take a look at an iPhone X, SafeArea will intend to avoid displaying content on the top-notch of an iPhone X. However, this feature is applicable to any device with a creative display feature. 

Why we need it? 

Sometimes, we might want to display valuable information on the top or the bottom of the screen. However, this all depends on the mobile device. Sometimes the content can be correctly displayed and sometimes it can be intruded by the operating system of a device, like an iPhone X. Hence, it’s better to use the SafeArea widget to display text. 

When to use it? 

Use the SafeArea widget only when you want to display the content of List view or single widget on top or bottom of the screen. This will also intend the child to avoid the Notch on the iPhone-X or any other similar creative physical features of the display. 

How to use it?

SafeArea uses a MediaQuery to check the dimensions of the screen and pads to match with the screen. Let’s take an example on how you can wrap your code in a SafeArea:

By using a simple command, you can safeguard your content on both IOS and Android.

You can even specify which dimensions you want:

And you can even wrap your body in a scaffold:


For more information on all the other Flutter widgets, you can hit the Flutter website

Translate »