Flutter Widget ( Safe Area )— The Whole Picture

I have been learning and also developing flutter apps for six months. When I started developing I always used to go the different articles and videos to understand a widget in Flutter to get the whole picture of that widget, to understand what a single widget does, and all of its components.

So this is the first article that I am writing about Flutter Widget Safe Area, and I will try and cover all of its components, so that other developers like me do not have to search through the web, reading articles and watching videos gathering pieces of information from every where, frankly it is time-consuming. I hope to get it right…

There are hundreds of different designs in Mobile phones these days, and flutter is committed to developing for all. To increase the screen size, mobiles have notches like the iPhone notch, medium notch, Waterdrop notch, while developing application Safe Area Widget provides enough padding as to avoid any intrusion by the default operating system programs.

1. What is the Safe Area Widget?

Safe Area Widget is used to wrap your main layout to prevent any intrusion of the default operating system by avoiding unnecessary clipping and overlapping because of the notch.

2. How to implement the Safe Area Widget?

class SafeAreaWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        bottom: true,
        left: true,
        right: true,
        minimum: EdgeInsets.all(16.0),
        maintainBottomViewPadding: true,
        child: Text('The is the safe area widget demo'),
      ),
    );
  }
}

Wrap any widget with SafeArea widget, you can wrap the main Scaffold also in SafeArea widget especially while designing for iPhones it is necessary to wrap your Scaffold in SafeArea widget so that top and bottom clipping does not appear due to operating system.

By default top, bottom, left, right are true. You can change the minimum default padding by adding your own value to it. The last property maintainBottomViewPadding(default is false) basically means that when a user engages with a widget which requires input through soft keyboard the SafeArea will maintain the padding below, meaning you will see white area below and the keyboard will sit over it maintaining the padding below.

3. Tips

As I said earlier when I started writing this article, that I will cover bits and pieces of information spread across the internet, I also experimented with widget and these were my finding…

1. If you wrap your Scaffold with SafeArea and you are using background colours, the entire screen will not be covered in that same colour, incase of iPhone top and bottom will be clipped and in case of Android phones, the top part of the screen will be clipped and will have default system colour. So be sure how and where to use the SafeArea widget, it will affect your UI.
2. If you are using Scaffold as your main widget and if you have added AppBar to your Scaffold then you do no need to use SafeArea widget. The AppBar widget takes care of the top the screen. Still, you might want to wrap SafeArea with the widgets that are at the bottom of the screen.

That’s All!

Thank you for reading my article, again this is my very first, so if you like it, do leave comments below and keep clapping for encouragement. Share this article with your friends, family, colleagues, acquaintances on Twitter, Facebook, Instagram…. Thank you ! 😁

with that said you can also support me by having a Cup of Coffee ☕️ with me.

https://www.twitter.com/FlutterComm