A visual guide to Flutter’s SafeArea widget

This is a repost of an answer I wrote on StackOverflow.

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: ...'),
)

And again with the widget wrapped in a SafeArea widget:

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

You can set a minimum padding for edges not affected by notches and such:

SafeArea(
minimum: const EdgeInsets.all(16.0),
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,
)

Supplemental code

In case you want to play around more with this, here is main.dart:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: BodyWidget(),
),
);
}
}
class BodyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topLeft,
child: SafeArea(
left: true,
top: true,
right: true,
bottom: true,
minimum: const EdgeInsets.all(16.0),
child: Text(
'My Widget: This is my widget. It has some content that I don\'t want '
'blocked by certain manufacturers who add notches, holes, and round corners.'),
),
);
}
}

A Flutter and Dart developer. Follow me on Twitter @suragch1 to get updates of new articles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store