How to use SafeArea in Flutter
Flutter SafeArea widget help the screen to align its child widget without overlapping with phone notches or notification bars

Every mobile phone screens are not sharp edges, most of the screens are rounded corners with notches or notification bars can overlap. this will be a problematic for aligning items on the screen.
Getting Started with SafeArea Widget
Using SafeArea
widget we can align content without overlapping in unsafe areas. It uses MediaQuery internally for padding required padding to its child widgets and make sure the content is visible in the safe area.
// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'I am in safe area!!!',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
We can even specify which dimension we need to add safe area.
SafeArea(
child: ListView(),
top: true,
botton: true,
left: false,
right: false
)
SafeArea
widget can be used to wrap any widget, Ideal way is to warp the Scaffold
body.
Conclusion
Flutter is built for developers to build apps out of the box. SafeArea is simple and power full widget which solves complex problems from the real world applications.
Happy Coding!!!

