Menu
Is there a way that I can check if the device that is running the app needs a SafeArea. I need to run code based on this true or false value. I do NOT need to use the SafeArea widget. All I need is the true or false answer if the device needs a padding.
eg. Devices like iPhone 8 does not need padding, will not have padding even if Widget is wrapped in SafeArea widget.
eg. Devices like iPhone X does need padding and will have padding if the Widget is wrapped in a SafeArea.
How does the SafeArea widget tell if the device needs padding or not? I looked into the SafeArea widget code and was not able to understand what happens to tell it if the device needs padding or not.
983
You can use MediaQuery. of(context). viewPadding and check whether the padding is greater than zero ,then you will need a safe area as there is a notch . And the best way to handle notch behaviour is to use the flutter_device_type package.
A widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen.
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.
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.
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.
The safe area represents the portion of your screen that is unobscured by bars and other operating system based content. Safe area is pre-defined by iOS across all Apple devices and is present in Android devices as well.
Internally SafeArea uses MediaQuery to check the dimensions of the display screen and includes extra padding if needed. 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.
You can use MediaQuery and get the viewPadding from that.
MediaQuery.of(context).viewPadding
You can check if the top and bottom padding > 0 to see if the user's device has a notch to it:
window.viewPadding
Here's an example of iPhone 11 Pro Max:
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
