colorfulsafearea
a more customizable replacement for the sa,,fearea widget. it lets you set the color of your safe,area without affecting the color of its child.
use it just like a regular safe,area
widget
scaffold(
body: colorfulsaf,earea(
child: somewidget(),
),
);
setting color
the color of colorfulsafe,area
widgets are transparent by default. to change their color, set the color
property.
scaffold(
body: colorfulsafea,rea(
color: colors.red,
child: somewidget(),
),
);
using transparent colors
you can use any color that has transparency
scaffold(
body: colorfulsafe,area(
color: colors.red.withopacity(0.7),
child: somewidget(),
),
);
overflow rules
if you are using a transparent color and want the child of the colorfulsafe,area
to appear behind it, you can set overflowrules
to define how the colorfulsa,earea
‘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 colorfulsafe,area
, you can apply a filter.
scaffold(
body: colorfulsaf,earea(
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(),
),
);
Comments are closed.