SafeArea in Flutter

SafeArea is an important and useful widget in Flutter which makes UI dynamic and adaptive to a wide variety of devices. While designing the layout of widgets, we consider different types of devices and their pre-occupied constraints of screen like status bar, notches, navigation bar, etc. But new devices are being launched with different designs and in certain scenarios, your app might overlay any of those pre-occupied constraints. So, in order to make our UI adaptive and error-free, we use SafeArea widget. In simple words, SafeArea is basically a padding widget, which adds any necessary padding to your app, based on the device it is running on. If your app's widgets are overlaying any of the system's features like notches, status bar, camera holes, or any other such features, then SafeArea would add padding around the app, as required.

Internally SafeArea uses MediaQuery to check the dimensions of the display screen and includes extra padding if needed.

Constructor :

const SafeArea({
   Key key,
   bool left: true,
   bool top: true,
   bool right: true,
   bool bottom: true,
   EdgeInsets minimum: EdgeInsets.zero,
   bool maintainBottomViewPadding: false,
   @required Widget child}
)

Above shown is the constructor for SafeArea. You can decide whether to avoid intrusions in a particular direction by changing the boolean value to true or false.

For instance, you want to use SafeArea in only top and bottom directions, then you can specify in following way.

SafeArea(
    left: false,
    top: true,
    bottom: true,
    right: false,
    child: Text('Your Widget')
)

The above code would add padding only at top and bottom while other directions (left and right) would remain unaffected. If you don't specify any directions, then the default would be true for all directions.

If you want to add minimum padding in any of the directions, you can do it in the following way:  

SafeArea(
   minimum: const EdgeInsets.all(15.0),
   child: Text('Your Widget'),
)

In the above code snippet, we are specifying the minimum padding that we need to add in all the directions. If you don't specify this Flutter would automatically calculate the required padding for all the directions.

Properties :

• bottom : This property is of type bool. It is true by default and setting it to false would disable SafeArea from adding padding to the bottom of the screen.
• top : This property is also of type bool and setting it to false would avoid padding at top of the screen.
• left : This property is of type bool and setting it to false would avoid padding at left side of the screen.
• right : This property is of type bool and setting it to false would avoid padding at right side of the screen.
• minimum : This property is of type EdgeInsets. You can specify the minimum padding to be added using this property.
• maintainBottomViewPadding : This property is of type bool and it specifies whether SafeArea should maintain the viewPadding instead of padding. For instance, if you are using an on-screen keyboard with SafeArea , the the padding can be maintained below the obstruction rather than being consumed.

Explanation :

Now we'll see how the above-mentioned properties work and when to use them.

Suppose, you are displaying a Text widget or any other widget at the bottom end of the screen, then on your device it might work, but on other devices, it might not be properly formatted.

Refer to the below screenshot to verify above mentioned scenario.

You can see that in the above app the text widget is not properly formatted. The above-shown device is rectangular in shape, but if you test the same app on an iOS device, then the text might cover the app drawer. As a developer, your app should be free from all bugs on all devices. In this case, we will use SafeArea.

Refer to below example :

SafeArea(
   minimum: const EdgeInsets.all(12.0),
   child: Text('Your Widget'),
)

In the above example, we have used minimum property. Here, minimum padding of 12 is added to all the sides, as all directions (top, bottom, right, left) are true by default.

If you want to use SafeArea in particular direction, then you can do it in the following way :

SafeArea(
   top: true,
   left: false,
   bottom: true,
   right: true,
   minimum: const EdgeInsets.all(12.0),
   child: Text('Your Widget'),
)

In the above example, we can see that all directions are set to true except left and hence SafeArea is not used in that direction.

Example: Without SafeArea

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('This is an example explaining use of SafeArea',
         style: TextStyle(color: Colors.green,
         fontSize: 20
         ),
        ),
      ),
    );
  }
}

In the above code, we have not used SafeArea and as a result Text is printed on the status bar. Notice that, we have not used App Bar here, because App Bar automatically calculates the values and adds the required padding.

Output:

With SafeArea :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          top: true  
        child: Scaffold(
          body: Text(
            'This is an example explaining use of SafeArea',
            style: TextStyle(color: Colors.green, fontSize: 20),
          ),
        ),
      ),
    );
  }
}

In the above code, we have used SafeArea and we can see that automatically padding is added around the text and is not covering the status bar.

Output:

In the above output, screen is only covered by status bar. Even if, it had been covered with notches, cameras etc even then the UI would adjust according to it.

Note: It is not necessary to use SafeArea above Scaffold. You can use it  above any widget, which you think can scatter or create obstruction on screen elements.