Flutter Widget - SafeArea.

Currently, one such industry where u get to see a lot of innovations in the smartphone industry. The smartphone industry is undergoing a transition from bezel to a bezel-less display and the Notch technology is the outcome of that transition. Notch is just a tentative step to achieve a complete bezel-less display.

Talking about the advantages of this technology, there is an improvement in the screen to body ratio of a smartphone display. They are trying to fit more screen in the available body. The screen to body ratio of an iPhone 8 Plus is 67.7%(without Notch) and that of an iPhone X is 81.49%. With teardrop(dewdrop) notch there is a further increase in the screen to body ratio of a smartphone display.

Talking about the disadvantages of this technology, initially, when this technology was used in the smartphones, not all apps were compatible with the notch and there was a cut through the content of the apps. The same was with watching videos.

We as developers have to design our apps around the hardware. Rounded corner and notches complicate the layout of our apps.

Flutter has an interesting solution to this notch problem.

Without the SafeArea

Imagine we’re building an app without an app bar. The purpose of the app is to display a message across one half of the available space. At first, we might develop the following code which, however, doesn’t look right on the screen.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return MaterialApp(
   home: Scaffold(
   body: Builder(
    builder: (context) {
     return Container(
      child: Column(
       children: <Widget>[
        Text("Text with Safearea widget",
         style:Theme.of(context).textTheme.display1,),
          ],),
    );},
  ),),
 );} }

Adding a SafeArea

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topLeft,
      child: SafeArea(
        left: true,
        top: true,
        right: true,
        bottom: true,
        minimum: const EdgeInsets.all(16.0),
        child: Text(
            'Safe Area'),
      ),
    );
  }
}

How Can You Contribute?

• Connect with me on Twitter or Linkedin or Instagram.
• Follow me on Github.

Show Your Support

Please comment below if you liked reading this post. Your feedback motivates me to write better!