How do I check if device needs SafeArea? (needs bottom/top padding)
The best way to predict SafeArea()
is required or not can be concluded based on whether you have used Scaffold()
widget or not.
Let say, if you have not used Scaffold widget in your page or route then you should wrap it inside SafeArea()
otherwise it will also consider your basel part or status bar or notch as your body of the screen.
Also, if you have used Scaffold()
, but you didn't included appbar inside it then you must wrap your body inside SafeArea() to make sure that the screen is not considering statusbar or basel or notch as a safe part of the screen.
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:
You can use MediaQuery
and get the viewPadding
from that.
MediaQuery.of(context).viewPadding