SafeArea in Flutter
Adapt your interface to notches, status bars and unsafe device areas
Download Complete ExamplesWhat is SafeArea?
The SafeArea widget in Flutter is essential for creating interfaces that correctly adapt to different devices, especially those with notches, status bars and unsafe areas.
Without SafeArea
Content overlaps with unsafe areas
With SafeArea
Content respects the safe areas
Problems solved by SafeArea:
- ✅ Avoids overlap with notches and cameras
- ✅ Respects the system status bar
- ✅ Adapts content to different screen shapes
- ✅ Compatible with modern iOS and Android
- ✅ Automatic handling of system insets
When to use SafeArea?
Devices with a Notch
iPhone X+ and modern Android devices with cameras in the screen
Status Bar
To prevent content from overlapping with the status bar
Navigation Bar
On devices with gesture-based navigation bars
Tablets and Unusual Shapes
Devices with unconventional aspect ratios
Basic Implementation
Simplest use of SafeArea
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SafeArea Example',
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
color: Colors.blue,
padding: const EdgeInsets.all(16),
child: const Text(
'Contenido seguro',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
Expanded(
child: Container(
color: Colors.grey[200],
child: const Center(
child: Text('Resto del contenido'),
),
),
),
],
),
),
);
}
}Properties of SafeArea
child
Child widget that will be wrapped by the safe area
Type: Widget
Required: Yes
left
Include padding on the left side
Type: bool
Default: true
top
Include padding at the top
Type: bool
Default: true
right
Include padding on the right side
Type: bool
Default: true
bottom
Include padding at the bottom
Type: bool
Default: true
minimum
Additional minimum padding to apply
Type: EdgeInsets
Default: EdgeInsets.zero
maintainBottomViewPadding
Keep the bottom padding when changing orientation
Type: bool
Default: false
Visual Examples
1. SafeArea Basics vs Without SafeArea
// ❌ SIN SafeArea - Problemas de superposiciónScaffold(
body: Column(
children: [
Container(
color: Colors.blue,
child: Text('Este texto puede superponerse'),
),
],
),
)
// ✅ CON SafeArea - Contenido seguroScaffold(
body: SafeArea(
child: Column(
children: [
Container(
color: Colors.blue,
child: Text('Este texto es seguro'),
),
],
),
),
)2. Control by Individual Sides
SafeArea personalizado
top: false, left: true, right: true
SafeArea(
top: false, // No aplicar padding superior left: true, // Aplicar padding izquierdo right: true, // Aplicar padding derecho bottom: true, // Aplicar padding inferior child: Container(
color: Colors.white,
child: Center(
child: Text('SafeArea personalizado'),
),
),
)3. SafeArea with Minimum Padding
Additional minimum padding
minimum: EdgeInsets.all(20)
SafeArea(
minimum: const EdgeInsets.all(20.0),
child: Container(
color: Colors.green[100],
child: Center(
child: Text(
'Con padding mínimo adicional',
textAlign: TextAlign.center,
),
),
),
)Common Use Cases
📱 Full Screen with AppBar
Scaffold(
appBar: AppBar(title: Text('Mi App')),
body: SafeArea(
child: ListView(
children: [
// Tu contenido aquí ],
),
),
)🎨 Screen Without AppBar
Scaffold(
body: SafeArea(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(...),
),
child: Center(
child: Text('Pantalla completa segura'),
),
),
),
)📐 Custom Design by Sides
SafeArea(
top: false, // Sin padding superior bottom: false, // Sin padding inferior left: true, // Con padding izquierdo right: true, // Con padding derecho child: Row(
children: [
// Contenido con padding lateral ],
),
)Interactive Demo of SafeArea
Example Content
This text adjusts according to the SafeArea configuration
// El código se generará aquí
Best Practices
✅ What you SHOULD do
- Use SafeArea on fullscreen screens without an AppBar
- Consider the notch in iOS designs
- Test on different devices and orientations
- Use top: false when you have an AppBar
- Combine with MediaQuery for complex cases
❌ What you should NOT do
- Don't use SafeArea inside an AppBar
- Don't assume all devices have the same unsafe areas
- Don't forget to test in landscape orientation
- Don't use fixed padding values instead of SafeArea
- Don't ignore bottom padding on devices with gesture-based navigation bars
Pro Tip
For advanced cases where you need more control over system insets, combine SafeArea with MediaQuery.of(context).padding to get specific values and create more customized layouts.
Exercises to Practice
Exercise 1: Fullscreen Gallery App
Create a photo gallery app that takes up the whole screen while respecting the safe areas.
Requirements: No AppBar, full-screen images, navigation gestures
Exercise 2: Music Player
Implement a music player with controls at the bottom that don't overlap with the navigation bar.
Requirements: Fixed controls at the bottom, centered artwork, song information
Exercise 3: Custom Chat
Create a chat interface where messages respect the edges but the input is always accessible.
Requirements: Chat bubbles, fixed input, no overlap with keyboard
Common Troubleshooting
❌ Content is still overlapping
Solution: Check that SafeArea is in the correct position of the widget tree
// Correcto: SafeArea envuelve el contenido principalScaffold(
body: SafeArea(child: MyContent()),
)
❌ Too much blank space
Solution: Use individual properties (top, bottom, etc.) to control which sides have padding
SafeArea(
top: false, // Solo aplica padding donde sea necesario child: Content(),
)
❌ Doesn't work in landscape
Solution: SafeArea adapts automatically, but check your orientation implementation
// SafeArea funciona en ambas orientaciones// Pero puedes necesitar lógica adicional para layouts específicos