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:

Here's an example of iPhone 11 Pro Max


You can use MediaQuery and get the viewPadding from that.

MediaQuery.of(context).viewPadding

Tags:

Dart

Flutter