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

Vasanth Jagadeesan

Enterprise solution architect

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.

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