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

How to use SafeArea in Flutter
How to create SafeArea in Flutter

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 {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
      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);

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      body: SafeArea(
          child: Center(
           child: Column(
            children: [
              const Text(
                'I am in safe area!!!',
                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.

    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.


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!!!

How to add about dialog in flutter
How to display about dialog in flutter application using showAboutDialog function.
Learn Why Google rewritten Google Pay app in Flutter
Are you building multi platform product for global user base, you should read this before you start development. Learn more about Why Google has rewritten Google Pay app completely in Flutter. #Flutter #GoogelPayDev #FlutterDev #Flutter #Dart #CrossPlatformDevelopment