Add SafeArea modifier

[Maksimka101]

Use case

I suffer when I need to implement a footer/header. I have to use a box to set a color, safe area to avoid system UI and another HBox for content

Proposal

I'd like to use only one box like this:

    HBox(
      style: Style(
        $with.safeArea(),
        $box.chain
          ..color.black()
          ..padding(20),
      ),
      children: [],
    );

[tilucasoli]

I’m not sure how well this aligns with the general use of Modifiers. The SafeArea widget is usually used for full page layouts and is rarely implemented in component creation.

Another alternative is you make an extension of Modifiers and add safe area

Please take a look at this documentation and let me know if you have any questions.