boxDecoration static method
- required Color color,
- required int depth,
- Curvature curvature = Curvature.flat,
- Swell swell = Swell.emboss,
- double spread = defaultSpread,
- Alignment lightSource = defaultLightSource,
- BoxShape shape = BoxShape.rectangle,
- BorderRadiusGeometry? borderRadius,
- BoxBorder? border,
- DecorationImage? image,
- BlendMode? blendMode,
NEUMORPHIC DEFINITION
Principal
With all Neu design the basis of these decorations is a color
and a
depth
. Color should ideally match or be similar to the color of the
background behind the resulting decoration. The depth
is the extent to
which this decoration will appear "extruded" from its surface. A larger
depth
increases the contrast of the shading of colors on either side of
the decoration.
Appearance of Shape
Other customizations include curvature
and swell
, as well as an
overriding lightSource
represented as an Alignment.
A Curvature is a description of the appearance of the actual surface of the decoration. A Curvature.flat decoration has no gradient (solid-color Gradient), while Curvature.convex orders a light -> dark gradient in a way that inspires a "bubble"-like appearance.
(Other options make the effect more extreme, such as Curvature.superconvex or reverse the effect: Curvature.concave.)
A Swell is an overall depiction of how the decoration appears in terms of being inset into the surface or extruded from it.
- Combining Swell.emboss with Curvature.convex, the decoration will appear like a bubble lifting out of the background.
- Combining Swell.deboss with Curvature.concave, the decoration will appear like a bubble popped and depressed into the background.
Override Source of "Light"
The lightSource
is always set by default as defaultLightSource
, which
is Alignment.topLeft. This gives the illusion of lighting the entire
neumorphic decoration from the top-left corner. All descriptions of
gradient and shadow directionality and the illusion of being toggled
or not toggled are based on this default light source. An overriding
Alignment may be provided, however, to dynamically "relight" the
decorations.
- Consider this lighting entirely artificial. Aspects of real light physics are not recreated. Simply put, this value is used to offset/shift the light and dark shadows.
Softness of Shadows
In terms of Shadows, the argument spread
is responsible for
determining how wide an area the effect covers and how blurry the
shadows appear.
Not all methods consider spread
, notably linearGradient
(and buildLinearGradient by extension) create a decoration
(a LinearGradient) that does not have shadows. These gradients may be
combined with shadows in other situations, where spread
will then be
considered.
Implementation
static BoxDecoration boxDecoration({
required Color color,
required int depth,
Curvature curvature = Curvature.flat,
Swell swell = Swell.emboss,
double spread = defaultSpread,
Alignment lightSource = defaultLightSource,
BoxShape shape = BoxShape.rectangle,
BorderRadiusGeometry? borderRadius,
BoxBorder? border,
DecorationImage? image,
BlendMode? blendMode,
}) =>
BoxDecoration(
backgroundBlendMode: blendMode,
image: image,
shape: shape,
borderRadius: borderRadius,
border: border,
gradient: linearGradient(
color: color,
curvature: curvature,
swell: swell,
depth: depth,
begin: lightSource,
),
boxShadow: boxShadows(
color: color,
curvature: curvature,
swell: swell,
depth: depth,
spread: spread,
lightSource: lightSource,
),
);