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.
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 the SafeArea
widget.
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.
Before using the SafeArea
widget, make sure to import the required libraries in our Dart file:
import 'package:flutter/material.dart';
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:
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:
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), ), ), ), ); } }
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.
Free Resources