Hello Guys, In this post we are going to learn what is SafeArea widget, when to use it.
Before going to start with SafeArea lets check the below code and check the result screen.
void main() => runApp(MyApps());
class MyApps extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Text("Text starting from statusbar",
style: TextStyle(color: Colors.red,fontSize: 20),
)),
);
}
}
|
Now run the app and see the result. The screen will display like below
In the result the Text started from statusbar position and its looks ugly. Then how should i resolve this problem. Now i update the code with adding the Padding widget
Scaffold(
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Text("Text starting from statusbar",
style: TextStyle(color: Colors.red,fontSize: 20),
),
))
|
now its showing the text from below status bar. So issue resolved? Nooooo If i run the same app in other device wich contains defferent dencity pixels, then the text display start in different position.class So i can i resolve this in different devices? For this Flutter introduced a widget called SafeArea. Lets update above code
Scaffold(
body: SafeArea(
child: Text("Text starting from statusbar",
style: TextStyle(color: Colors.red,fontSize: 20),
),
))
|
Now run the app and check the result it will looks like below. Now you can run this app in any device android/ios it will solves our issue
SafeArea: As per official flutter doc A widget that insets its child by sufficient padding to avoid intrusions by the operating system
Properties:
Parameter | Description |
top | Will need to give padding from top, default value is true |
left | Will need to give padding from left, default value is true |
right | Will need to give padding from right, default value is true |
bottom | Will need to give padding from bottom, default value is true |
maintainBottomViewPadding | Specifies whether SafeArea should maintain padding, like handle keyboard view, default value is false |
Article Contributed By :
|
|
|
|
1520 Views |