Flutter - How to use SafeArea Widget

In this tutorial, I will show you how to use SafeArea to avoid application content from being clipped by intrusions such as status bar, notch on display, and the rounded corners part of a display. Let's take an example.

 We create a page that consists of a Text widget without AppBar.

Container( child: Text("Errorgram",style: TextStyle(fontSize: 50,fontWeight: FontWeight.bold),)));

 

The result can be seen in the above screenshot. As you can see, the text is clipped by the notch, To prevent this type of problem Flutter provides a widget called SafeArea. It provides sufficient padding to avoid intrusions.

Syntax :

The constructor of SafeArea like below.

  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,
  })

 

SafeArea - Parameters:

  • Key? key: The widget's key.
  • bool left: Whether to avoid system intrusions on the left. Defaults to true.
  • bool top: Whether to avoid system intrusions on the top. Defaults to true.
  • bool right: Whether to avoid system intrusions on the right. Defaults to true.
  • bool bottom: Whether to avoid system intrusions on the bottom. Defaults to true.
  • EdgeInsets minimum: The minimum padding to apply. Defaults to EdgeInsets.zero.
  • bool maintainBottomViewPadding: Whether it should maintain the MediaQueryData.viewPadding instead of the MediaQueryData.padding when consumed by the MediaQueryData.viewInsets of the current context's MediaQuery. Defaults to false.
  • required Widget child: The widget below this widget in the tree.

 

SafeArea requires you to pass a widget as child argument, while the other arguments are optional. Let's take an example to wrap the Text above as the child of a SafeArea widget.

SafeArea(child: Container( child: Text("Errorgram",style: TextStyle(fontSize: 50,fontWeight: FontWeight.bold),))));

You can see the below output in the screenshot.

 

 

Full Example:

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(child: Container( child: Text("Errorgram",style: TextStyle(fontSize: 50,fontWeight: FontWeight.bold),))));
  }
}

I hope it can be of use to you.

I'm grateful.

Tags: