Flutter Widget Guide — SafeArea Widget in 5 mins or less.
This is This is Part 1 in the series where I cover all the Flutter widgets that are in this YouTube playlist. I created my own widget guide which I believe will helpful to people who are new to this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
Modern Day devices (both Android and iOS) have notches. The main reason behind notches is that manufacturers are trying to find ways to shift elements from the front face of our phones. I am not a fan of the design, but there is no escaping now.
We as developers have to design our apps around the hardware. Rounded corner and notches complicate the layout of our apps.
Flutter has an interesting solution to this notch problem.
SafeArea Widget
1 | What?
Wrap your main layout with this widget to prevent unnecessary clipping and overlapping because of the notch. Yup, that’s all you have to do.
2 | Wondering how it works?
Have a look at the Code snippet below.
Below is the visual representation of the code above.
3 | Explanation
Here, we have a very basic implementation of the SafeArea widget.
We have a Column widget with 3 children — Two Text Widgets wrapped inside Container Widget (commonly used to provide padding, margin or width and height to its child widget) and a RaisedButton widget to control the top and bottom properties of the SafeArea widget. It is done simply by toggling the value of the _isEnabled variable.
The body of the Scaffold widget is wrapped in SafeArea widget with top and bottom arguments initially set to True. Now, we can observe the changes in our layout with and without the SafeArea widget by pressing the Button at the center.
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.
See more in the series:
Have a wonderful day 🙂
