The SafeArea widget in Flutter is used to automatically adjust its child widgets to avoid overlapping with system overlays such as the status bar, bottom bar, or notch area. It ensures that the content within it is visible and does not get obstructed by the device's hardware features.

Attributes:

1. top (bool):

   • Whether to include padding to avoid the status bar area. The default value is true.

2. bottom (bool):

   • Whether to include padding to avoid the bottom navigation bar or device's bottom insets. The default value is true.

3. left (bool):

   • Whether to include padding to avoid the left edge of the screen. The default value is true.

4. right (bool):

   • Whether to include padding to avoid the right edge of the screen. The default value is true.

5. minimum (EdgeInsets):

   • The minimum padding to apply around the child. It overrides the default behavior of automatically calculating padding based on system overlays.

Example:

import 'package:flutter/material.dart';

class SafeAreaExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SafeArea Widget Example'),
      ),
      body: SafeArea(
        top: true,
        bottom: true,
        left: true,
        right: true,
        minimum: EdgeInsets.all(16.0),
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'SafeArea Example',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SafeAreaExample(),
  ));
}

Explanation:

• In this example, a SafeArea widget is used to ensure that its child widget is padded to avoid overlapping with system overlays.

• The top, bottom, left, and right properties are set to true to include padding to avoid the respective edges of the screen.

• The minimum property is set to EdgeInsets.all(16.0) to provide a minimum padding of 16.0 around the child widget.

• Inside the SafeArea, there's a Container with a blue background color and centered text saying "SafeArea Example".

• When you run this code, the content inside the SafeArea will be padded to ensure it is not obstructed by system overlays like the status bar or bottom navigation bar.