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
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'),
);
}
}