ColorfulSafeArea

一个更具可定制性的 SafeArea 小部件替代品。它允许您设置 SafeArea 的颜色而不影响其子项的颜色。

ColorfulSafeArea

像普通的 SafeArea 小部件一样使用它

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

设置颜色

ColorfulSafeArea 小部件的颜色默认为透明。要更改其颜色，请设置 color 属性。

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

使用透明颜色

您可以使用任何带有透明度的颜色

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

溢出规则

如果您使用的是透明颜色，并且希望 ColorfulSafeArea 的子项出现在其后面，则可以设置 overflowRules 来定义 ColorfulSafeArea 的子项应如何出现。默认值为 OverflowRules.all(false)。 OverflowRules 类的工作方式与 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)

模糊溢出区域

如果您想为 ColorfulSafeArea 应用模糊效果，可以应用滤镜。

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

使溢出区域可交互

当您设置 overflowRules 并希望 ColorfulSafeArea 后面的子项溢出部分可交互时，可以将 overflowTappable 设置为 true。

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

GitHub

https://github.com/ejprok/colorful_safe_area