SafeArea for Flutter
SafeArea for Flutter
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 manufacturers.
If you are using a Scaffold with an AppBar, the appropriate spacing will be calculated at the top of the screen without needing to wrap the Scaffold in a SafeArea and the status bar background will be affected by the AppBar color (Red in this example).
If you wrap the Scaffold in a SafeArea, then the status bar area will have a black background rather than be influenced by the AppBar.
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.topLeft, // and bottomLeft child: SafeArea( child: Text('My Widget: ...'), ), )