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 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.

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 {
@override
Widget 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:

Text without SafeArea widget
Text without SafeArea widget

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 {
@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),
),
),
),
);
}
}

After running the above code, we will be able to see the following output:

Text with SafeArea widget
Text with SafeArea widget

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.

Free Resources

Copyright ©2024 Educative, Inc. All rights reserved