Flutter SafeArea - Handle start position of Widgets in the screen

Last updated Aug 06, 2021

Hello Guys, In this post we are going to learn what is SafeArea widget, when to use it.

 

Before going to start with SafeArea lets check the below code and check the result screen.

void main() => runApp(MyApps());

class MyApps extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Text("Text starting from statusbar",
            style: TextStyle(color: Colors.red,fontSize: 20),
          )),
    );
  }
}

Now run the app and see the result. The screen will display like below

Flutter Safearea example

In the result the Text started from statusbar position and its looks ugly. Then how should i resolve this problem. Now i update the code with adding the Padding widget

Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(30.0),
            child: Text("Text starting from statusbar",
              style: TextStyle(color: Colors.red,fontSize: 20),
            ),
          ))

 

now its showing the text from below status bar. So issue resolved? Nooooo If i run the same app in other device wich contains defferent dencity pixels, then the text display start in different position.class So i can i resolve this in different devices? For this Flutter introduced a widget called SafeArea. Lets update above code

Scaffold(
body: SafeArea(
  child: Text("Text starting from statusbar",
    style: TextStyle(color: Colors.red,fontSize: 20),
  ),
))

Now run the app and check the result it will looks like below. Now you can run this app in any device android/ios it will solves our issue

 

Flutter safearea, how to resove statusbar issue

 

SafeArea: As per official flutter doc A widget that insets its child by sufficient padding to avoid intrusions by the operating system

 

Properties:

Parameter Description
top Will need to give padding from top, default value is true
left Will need to give padding from left, default value is true
right Will need to give padding from right, default value is true
bottom Will need to give padding from bottom, default value is true
maintainBottomViewPadding Specifies whether SafeArea should maintain padding, like handle keyboard view, default value is false

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1520 Views