Flutter - SafeArea Widget







Modern Day apps have notches (both Android and iOS). The key explanation behind notches is that the manufacturers are seeking to find ways of removing elements from our phones 'front face. I'm not a design master or fan but now there's no escape. We have to build our apps around the hardware as developers. Rounded corners and notches make the layout of our apps more complicated.


understand the problem from the below screens:

Layout for normal Screen worked fine !!















But the same layout is not working for notch screen ..!!, Notification tab is overlapped by camera space.










Flutter has an interesting solution to this notch problem.


SafeArea Widget:


Use this Widget to surround the key interface to avoid unwanted clicking and overlapping due to the notch. Yup, this is what you've got to do.


Wondering how it works?... Let's assume you are trying to render a list with will result similar to the below image ...


Code:

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children : List.generate(100,(i) => Text('This is some test ')) ); } }

Now to fix the corner overlapping part ....?? the answer is to wrap your code with SafeArea ..here you go..


Code:

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child:ListView( children : List.generate(100,(i) => Text('This is some test ')) )); } }





Noticed that extra padding at the bottom, that's the magic of SafeArea !!

0 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad