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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and we would call here our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class MyApp extends StatelessWidget class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build Area -> MaterialApp -> Scaffold widget.
|
1 2 3 4 5 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: )); } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
SafeArea( top: true, bottom: true, left: true, right: true, child: Center( child: Text( 'Example of SafeArea Widget in Flutter', style: TextStyle( fontSize: 26, color: Colors.black, ), textAlign: TextAlign.center, ), )) |
6. 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 20 21 22 23 24 25 26 27 28 29 30 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { messagePrint() { print('Function Called'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( top: true, bottom: true, left: true, right: true, child: Center( child: Text( 'Example of SafeArea Widget in Flutter', style: TextStyle( fontSize: 26, color: Colors.black, ), textAlign: TextAlign.center, ), )))); } } |
Screenshot:
