Hello Guys👋
As discussed earlier, lets start knowing about widgets🔨. I have searched many resources to learn Flutter and couldn't find any that are more efficient than the Flutter Docs📑 till date (as much as I know). According to me, the documentation of flutter is very well written and whenever you have some doubt, go check it👍.
In this article, we will discuss about SafeArea. Let's get started with the article.
- What is SafeArea & What is Does ?
- How to Use SafeArea in our App ?
- Properties of SafeArea :
- Working Demo
What is SafeArea and What it Does ❔
SafeArea is one of the important widget in Flutter. It makes the UI dynamic and adaptive to various types of devices. We can also see it like a widget which provides padding automatically 🔲 according to the pre-occupied constraints of the screen📱.
Let's understand this in more detail. Think of designing an app UI so that it fits in every type of screen design (i.e, irrespective of its camera hole, status bar, notches, navigation bar,...)🤔🤔.
We cannot Right? Here comes the role of SafeArea🖐. If our app features is overlaying any of the system features, then SafeArea would add padding around the app, as required. Basically, it uses Media Query to check the dimensions of the display screen and add the required padding if needed.
How to use SafeArea 🤔?
This is the constructor for SafeArea Widget 👇. This creates a widget that avoids operating system interfaces.
const SafeArea ({
Key key,
bool left: true,
bool top: true,
bool right: true,
bool bottom: true,
EdgeInsets minimum: EdgeInsets.zero,
bool maintainBottomViewPadding: false,
@required Widget child
})
We can change the values according to our requirements. Suppose if we want padding only on top and bottom, we can change the values of left, right to false. And if we want some minimum padding to be added on one/more sides, we can change the value of minimum to the desired padding. For Example, see the below code.
SafeArea(
minimum: const EdgeInsets.all(12.0),
child: Text('My first Widget'),
)
The above code will add minimum padding in all directions. If we haven't specified the minimum value, then the required padding according to the screen dimensions will be added✨.
Properties 🗂:
There are some properties of SafeArea which we can use accordingly.
- left-> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the left of the screen.
- top-> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the top of the screen.
- right-> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the right of the screen.
- bottom-> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the bottom of the screen.
- minimum-> EdgeInsets : If we specify some value, minimum that much of padding will be added to one/more sides of the screen. It is like the minimum value it should add..
- maintainBottomViewPadding -> bool : byDefault it is false. It specifies whether SafeArea should maintain the viewPadding instead of padding.
For Instance, if there is an onscreen keyboard displayed above the SafeArea, the padding can be maintained below the obstruction rather than being consumed🙂.
Working Demo 💻🤩
Now, Let's apply the theory we have learnt so far🙃.
See this Code,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text(
'In this Article, We learned about SafeArea, Now lets see the Demo',
style: TextStyle(
color: Colors.amber,
fontSize: 20,
),
),
),
);
}
}
And our app looks like
In the above screenshot, The text is overlaying the status bar of the device, which we don't want to🚫. Now, lets use SafeArea to make it look good🎇.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
top: true,
child: Scaffold(
body: Text(
'In this Article, We learned about SafeArea, Now lets see the Demo',
style: TextStyle(
color: Colors.amber,
fontSize: 20,
),
),
),
),
);
}
}
And our app looks like
The required padding is automatically added to the top of our app to prevent the overlaying with the system features.
And See the below code, (using minimum property) 🤟
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
minimum: EdgeInsets.all(14),
child: Scaffold(
body: Text(
'In this Article, We learned about SafeArea, Now lets see the Demo',
style: TextStyle(
color: Colors.amber,
fontSize: 20,
),
),
),
),
);
}
}
And our app looks like
We can see that some amount of padding is automatically added on all directions because we have used the minimum property here.
Not only the status bar, SafeArea will adjust our UI for notches, camera hole, notification bar... or any pre-defined feature of the system it is running 📱. Try giving different values to the properties and Have Fun seeing the result😁🥳.
What's Next ⏭?
Thank you for reading so far🙏. I hope you enjoyed following it and got a clear idea about SafeArea. I highly recommend you to play with this widget and try to use it in your app.
In the next part, we will discuss the Expanded Widget in detail !! So Stay Tuned👀👀!!!!
Do share your valuable suggestions and your honest feedback, also Constructive Criticism. If you have any comments, questions, or concerns, Do comment them and I am more than happy to take them💬.
✏Imp Note* :✏ If you are a beginner and wanted to learn flutter, you can follow this series because this is the exact path I am following and learning Flutter✋🙋♀️. It helps you learn flutter more easily and don't waste your time searching for best resource (as I have already searched many and documenting my learnings🥰😊).
Happy Learning 😊👍!!