Flutter Safe Area

SafeArea

is defined by its own word giving you the safe area inside the screen of your app. If any case your app toches the notch and overlaps to something it will safely position any content of this widget inside the screen.

MediaQuery - It uses mediaquery to check the dimension of the screen and create a padding

You can use it specially if you're not using a scaffold widget, it will automatically make padding for your app

 

Constructor

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}

)

Properties

Most of the property are self explanatory. Just use a small chunk of common sense. For example if we modify the top which has a data type of bool and make it false then the padding at the top will not be applied.

Top

Minimum
As you can see, the value for the minimum is edgeinset which is a padding. EdgeInsets are use in containers to add padding where you can also use it to define the padding of a Safe Area

Example

This is the screen without the Safe Area

As you can see, it overlaps with the notch and notification at the top

This is the screen with Safe Area

Sample Code

class WidgetSafeArea extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Text('fdfredf'),

    );

  }

}