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:
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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call the MyApp our main design class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main layout class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends 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.
|
1 2 3 4 5 6 7 8 9 10 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: )); } } |
5. Create SafeArea widget in body section. Safe area widget can support only one child widget.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ))); } } |
6. Creating Center widget with Column widget and Text widget under SafeArea widget. Column widgets supports multiple children widgets.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child:Center( child: Column( children: [ Text('Hello Guys !!!', style: TextStyle(fontSize: 40),) ], ), )))); } } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child:Center( child: Column( children: [ Text('Hello Guys !!!', style: TextStyle(fontSize: 40),) ], ), )))); } } |
Screenshot:
terimakasih sangat membantu
Welcome 🙂 .