In simple words, SafeArea is a widget that automatically adds padding needed to prevent its descendants from being covered by notches, the system status bar, rounded cornersÂ… or other similar creative physical features on the device screen.
Constructor:Advertisements
SafeArea({
Key? key,
required Widget child
bool left,
bool top,
bool right,
bool bottom,
EdgeInsets minimum,
bool maintainBottomViewPadding,
})
Example
Without SafeArea

With SafeArea
The complete source code that produces the sample app that shown in the second screenshot:
// main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
'There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain',
style: TextStyle(fontSize: 16),
),
Text(
'There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain')
],
),
),
);
}
}
Further reading:
- Flutter: Create a Password Strength Checker from Scratch
- Flutter: How to Draw a Heart with CustomPaint
- Implementing Tooltips in Flutter
- Adding a Border to Text in Flutter
- Flutter: How to Colorize Debug Console Logs
- Flutter: How to Make Spinning Animation without Plugins
You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.