What is the purpose of a SafeArea?

Wrap some other widget in SafeArea, and it will add any padding required to keep your widget from being stopped by the system status bar, such as notches, holes, and curved edges.The SafeArea widget is a new Flutter widget available in Flutter release 1.7.1 and above. It provides developers with the ability to programmatically add padding around their widgets, allowing for safe area insets to be defined based on screen geometry and orientation of a device. It also enables “layouts that work well across multiple devices” by avoiding overlap between critical UI elements such as status bars, actions sheets, tab bars, toolbars, etc., and content areas in your app.

 

without safearea
without safearea
with safearea
with safearea

 

Where should I use SafeArea?

In iOS 10+ (API level >= 14), a new attribute known as safe area insets is introduced for both iOS and tvOS. Safe area insets define the distance from a rectangle’s edges to its closest , which may be larger than the physical display size when elements such as navigation or tab bars are present, in order to provide space for them. In Flutter, the SafeArea widget uses this information to add padding around widgets  To avoid having content being covered by system UI elements such as status bars, toolbars etc., it makes sense to use this widget on screens with larger content areas like tablet devices.

 

What does SafeArea do?

 

SafeArea provides an overlay on the screen that is used to inset all your widgets. The following screenshot shows the overlay in action:

The above screenshots show how different sized screens can change our app’s layouts. If we were to run this code on an iPhone X with no SafeArea widget, it would look like this: Notice that there are no margins at the bottom of the page and that everything is placed according to where they were defined in xml files. You’ll notice that both Toolbar1 and Container2 are overlapping each other, while StatusBar is covering some content at the top of the page. Now, if you add a SafeArea widget below your main stack (named Container ): Note, while experimenting with your xml files for different devices/orientations etc., you should use the new Flutter Inspector which is available in flutter/bin (Cmd+Shift+I on Mac). This tool enables you to select a Widget and resize your screen. You can then select another Widget and see how its sizes or positions change.

 

What layouts will I get by using SafeArea?

If we were to run our app with Container added within SafeArea without changing any xml files, we would get something like this: The problem here is that we couldn’t be sure that Toolbar1 won’t overlap Container . That’s where constraints come in handy. If you have used Auto Layout for iOS or ConstraintLayout for Android , it’s similar but much simpler to use in Flutter. Let’s update our xml files with constraints using the new Flutter Inspector mentioned above:

 

You’ll notice that we can define margins, paddings, distances etc. for different sides of widgets within Stack , Row and Column . If you resize your screen now, you’ll see how nicely everything is aligned to different areas on our page. You could also experiment with SafeArea Insets if you want to have more control over inset values at specific locations of your screen. We’ve just scratched the surface here but I encourage you to check out all the resources below before moving forward. Once you are ready, let’s move on to building an app that uses SafeArea widget! Note: This tutorial is written using flutter build apk (linux/mac) or flutter build ios (Mac only). If you’re not familiar with it, check out Building iOS . See Installing Flutter to find the appropriate documentation for your operating system.

 

Code snippet using SafeArea


Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(15.0),
              padding: const EdgeInsets.all(3.0),
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.blueAccent)),
              child: const Text(
                'You have pushed the button this many times: sjdcbjsV DkjBSDCJKs kjVSCJSV  SCVjshfv KJSFBCjkfn',
              ),
            ),
          ],
        ),
      ),
    )

Other Resources

https://api.flutter.dev/flutter/widgets/SafeArea-class.html

Leave a Comment