ejprok / colorful_safe_area

A replacement for Flutter's default SafeArea widget

ColorfulSafeArea

A more customizable replacement for the SafeArea widget. It lets you set the color of your SafeArea without affecting the color of its child.

Use it just like a regular SafeArea widget.

Scaffold(
    body: ColorfulSafeArea(
        child: SomeWidget(),
    ),
);

Setting Color

The color of ColorfulSafeArea widgets are transparent by default. To change their color, set the color property.

Scaffold(
    body: ColorfulSafeArea(
        color: Colors.red,
        child: SomeWidget(),
    ),
);

Using Transparent Colors

You can use any color that has transparency

Scaffold(
    body: ColorfulSafeArea(
        color: Colors.red.withOpacity(0.7),
        child: SomeWidget(),
    ),
);

Overflow Rules

If you are using a transparent color and want the child of the ColorfulSafeArea to appear behind it, you can set overflowRules to define how the ColorfulSafeArea's child should appear. The default value is OverflowRules.all(false). The OverflowRules class works much like EdgeInsets.

// allows the child to overflow behind all sides
overflowRules: OverflowRules.all(true)

// allows the child to overflow only on the left and bottom sides
overflowRules: OverflowRules.only(left: true, bottom: true)

// allows the child to overflow on the top and bottom
overflowRules: OverflowRules.symmetric(vertical: true)

Blurring Overflow Area

If you want to apply a blur effect to the ColorfulSafeArea, you can apply a filter.

Scaffold(
    body: ColorfulSafeArea(
        overflowRules: OverflowRules.all(true),
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: SomeWidget(),
    ),
);

Making Overflow Area Interactive

When you set overflowRules and would like for the parts of the child that have overflowed to be interactable behind the ColorfulSafeArea, you can set overflowTappable to true.

Scaffold(
    body: ColorfulSafeArea(
        overflowRules: OverflowRules.all(true),
        overflowTappable: true
        child: SomeWidget(),
    ),
);

colorful_safe_area's Issues

Add gaussian blur as option for transparent background color?

First of all thanks for this great component!!! This is more a kind of feature request than an issue:
Would it be possible to think about adding a gaussian blur as option to transparent background color? This would enable Cupertino-Style Apps which have the same style on status bar and bottom navigation bar (CupertinoTabBar).

Add elevation effect

Hi.
Firefox on android contains best status bar effect.

Can you do the same?

Null safety support

I will make a PR with null safety support implementation

Feature request: Different colors for top and bottom

Allow different colors for top and bottom of safe area

currently they have to be the same

Top flag is ignored when set to false

On SafeArea, setting one of the directions (left, top, right, bottom) to false means that the safe padding will not be set to that particular direction. This is the result if we set top to false:

On ColorfulSafeArea, instead, it still applies the padding. The only thing it doesn't do is to paint the background. Here's what happens when setting the top parameter to false:

(please note that the white dots are part of a custom background I have in the app)

It should be possible to ignore a padding, shouldn't it? If so, we can have two flags for each direction: one for painting or not, and another one for ignoring the padding or not.