Create Flutter App Layout Design without AppBar using SafeArea

In many flutter projects we have some specific design details to make our app screen without the App Bar to make the application full screen. But if you direct remove the App bar from your project you will see that all the body content goes at the top of screen and stuck there. Without the app bar the content starts above from status bar and this looks pretty bad for our application. So here flutter gives us solution using their SafeArea widget. The SafeArea widget automatically determines the Status bar height according to your device screen size and set automatically padding to your body layout. So in this tutorial we would Create Flutter App Layout Design without AppBar stuck at top of status bar Solution in Android iOS example.

Screenshot of app without SafeArea:

Screenshot of App with SafeArea:

Now you can see the difference between both layout. So let’s get started.

Content in this project Create Flutter App Layout Design without AppBar Solution Android iOS Example:

1. Import material.dart package in your app.

2. Call the MyApp our main design class using void main runApp() method.

3. Create our main layout class named as MyApp extends with StatelessWidget.

4. Create Widget Build method in our main class. In build method we have to create our Scaffold widget. The Scaffold widget create the basic design on our layout.

5. Create SafeArea widget in body section. Safe area widget can support only one child widget.

6. Creating Center widget with Column widget and Text widget under SafeArea widget. Column widgets supports multiple children widgets.

7. Complete source code for main.dart file:

Screenshot:

Create Flutter App Layout Design without AppBar Solution Android iOS

2 Comments

  1. terimakasih sangat membantu

Leave a Reply

Your email address will not be published.