How to get safe area size/padding in Flutter

Apps made with Flutter, the open-source mobile SDK (Software Development Kit) from Google, are composed of widgets. Each one is a lightweight object designed to do a specific task like keep content away notches, or animate transitions, or even fit one widget inside another. Becoming familiar with all the widgets provided by the SDK is an important step toward becoming an experienced  Flutter developer.

So to keep this in mind, here is an article on Flutter Widgets. Here is a series of some widgets each showing the important features of one particular widget. You will see the code for each one and a demo of how it works. 

How to Use Safe Area in Flutter

Learn the best times to use that widget and get a heads up on its most important properties. It's a very easy way to know about some of the most important Flutter Widgets. Let's see How to get safe area size/padding in Flutter

Let's get started!

1. SafeArea

On today's devices, apps rarely get a neat little rectangle to run in. Notification bars and controls can creep in, and rounded corners and notches nip at your content, complicating layouts.

That's why flutter has SafeArea. It uses MediaQuery to check the dimensions of the screen and pads its shell to match. So, if your app looks like this wrap it in a safe area, and keep your contents safe on both iOS and Android.

                   
So let's take an example. Here is the code without SafeArea.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: HomeWidget(),
),
);
}
}

class HomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 200,
itemBuilder: (BuildContext context, int index) {
return Text(" This is some text This is some text This is some text");
}
);
}
}

Now wrap the ListView.builder with the SafeArea and the magic happens.
return SafeArea(
child: ListView.builder(
itemCount: 200,
itemBuilder: (BuildContext context, int index) {
return Text(" This is some text This is some text This is some text");
}
),
); 




Bravo! Here we got about the Scaffold widget. There are so many properties that you get from the SafeArea Class
Previous
Next Post »