How to use safearea widget in Flutter
In Flutter, the SafeArea widget is an essential component used to ensure that our app's content remains visible and accessible on the screen, even when the device has notches, status bars, or any other intrusions. It helps provide padding around our app's content, preventing any overlap with system UI elements. This answer will explore using the SafeArea widget and its various properties with coding examples.
Constructor and parameters
The SafeArea widget provides a constructor with various parameters to customize its behavior and layout.
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
})
Let's take a closer look at each parameter and its purpose:
key: An optional key that uniquely identifies theSafeAreawidget.left: Whether to apply padding to the left edge of the screen (default: true).top: Whether to apply padding to the top edge of the screen (default: true).right: Whether to apply padding to the right edge of the screen (default: true).bottom: Applying padding to the screen's bottom edge (default: true).minimum: The minimum insets around the content, considering system UI elements (default: no padding).maintainBottomViewPadding: Whether to avoid resizing content when the keyboard is displayed (default: false).child: The widget representing the main content to be wrapped within the safe area.
Importing necessary libraries
Before using the SafeArea widget, make sure to import the required libraries in our Dart file:
import 'package:flutter/material.dart';
Error
Let's first demonstrate the issue we face when we are not using the SafeArea widget. In the code below, when we run the app, we might notice that the text may get partially hidden behind notches or status bars on devices with such features.
class MySafeAreaApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Text('Welcome to Educative.io! We hope you are enjoying your time exploring answers and learning with us.',style: TextStyle(fontSize: 22),),),);}}
After running the above code, we will be able to see the following output:
Using the SafeArea
In the code below, we have wrapped the Text with SafeArea. The text will now be padded properly, ensuring system UI elements do not obscure it.
class MySafeAreaApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: SafeArea(child: Text('Welcome to Educative.io! We hope you are enjoying your time exploring answers and learning with us.',style: TextStyle(fontSize: 22),),),),);}}
After running the above code, we will be able to see the following output:
Code example
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyHomePage(),));
}
class MyHomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Text(
'Welcome to Educative.io! We hope you are enjoying your time exploring answers and learning with us.',
style: TextStyle(fontSize: 22),
),
),
),
);
}
} Conclusion
The SafeArea widget is an invaluable tool to ensure a smooth and user-friendly experience on devices with different screen shapes and sizes. By wrapping our app's content with the SafeArea, we can guarantee that system elements like notches and status bars won't obscure our UI elements.
