What is the purpose of SafeArea in Flutter?

Technology CommunityCategory: FlutterWhat is the purpose of SafeArea in Flutter?
VietMX Staff asked 3 years ago

SafeArea is a widget that insets its child by sufficient padding to avoid intrusions by the operating system.

SafeArea is basically a glorified Padding widget. If you wrap another widget with SafeArea, it adds any necessary padding needed to keep your widget from being blocked by the system status bar, notches, holes, rounded corners and other “creative” features by manufactures.

Here is an example without SafeArea set:

Align(
  alignment: Alignment.topLeft,  // and bottomLeft
  child: Text('My Widget: ...'),
)

You can also turn off the safe area insets for any side:

SafeArea(
  left: false,
  top: false,
  right: false,
  bottom: false,
  child: Text('My Widget: ...'),
)

Setting them all to false would be the same as not using SafeArea. The default for all sides is true. Most of the time you will not need to use these settings, but I can imagine a situation where you have a widget that fills the whole screen. You want the top to not be blocked by anything, but you don’t care about the bottom. In that cause you would just set bottom: false but leave the other sides to their default true values.

SafeArea(
  bottom: false,
  child: myWidgetThatFillsTheScreen,
)