Example of SafeArea Widget in Flutter Android iOS

In today’s mobile screen style the top notification bar is with Notch. There are some screens in mobiles which has dual punch hole camera or single punch hole camera inside it. The Notch and punch hole design is present on notification bar and dose effect the screen ratio. So there for flutter comes with SafeArea widget. SafeArea widget usages the MediaQuery class of flutter and automatically set padding to the top and bottom notch area. So in this tutorial we would learn about Example of SafeArea Widget in Flutter Android iOS.

Example of SafeArea Widget in Flutter Android iOS Tutorial:

1. Open your project’s main.dart file and import material.dart package. This package contains all the major widgets.

2. Create void main runApp() method and we would call here our main MyApp class.

3. Create our main class MyApp extends StatelessWidget  class.

4. Creating Widget Build Area -> MaterialApp -> Scaffold widget.

5. Now we would create SafeArea widget in the body section of Scaffold widget. We would make a Center widget and Text widget inside SafeArea widget. You can learn more about SafeArea widget on Flutter’s official page here.

  • top : Used to avoid system intrusions from top of screen like Status bar.
  • bottom : Used to avoid system intrusions from bottom of screen.
  • left : Used to avoid system intrusions from left side of screen.
  • right : Used to avoid system intrusions from right side of screen

6. Complete source code for main.dart file:

Screenshot:

Example of SafeArea Widget in Flutter Android iOS Tutorial

Leave a Reply

Your email address will not be published.