Neu class
A Neumorphic, or new skeuomorphic, helper class with a variety of static and instance methods for the simple generation of shaded decorations conforming to the neumorphic design concept.
These designs are often solid in terms of color variety: genreally a dominant color is used as a backdrop as well as the color of controls and elements. These items that typically appear on or "above" the surface in standard design systems are intended in neumorphism to extrude from or "rise out" or into the surface.
This extrusion, which can be imagined as clay- or rubber-like, is achieved by a combination of same-color elements and background, contrasting shadows, slight variances in color shading and (potentially) gradients for the impression of natural lighting.
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.
This property, especially when combined with varying Curvature
s can
really "sell" the pressed or unpressed effect.
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.
NEU USAGE
Using Neu
Static Methods
Static methods that expect to be provided parameters (or allowed to default):
For example:
final LinearGradient neuGradient = Neu.linearGradient(
color: Colors.red,
depth: 25,
curvature: Curvature.superconvex,
swell: Swell.superemboss,
);
final List<BoxShadow> neuShadows = Neu.boxShadows(
color: Colors.red,
depth: 25,
curvature: Curvature.superconvex,
swell: Swell.superemboss,
);
final BoxDecoration neuDecoration = BoxDecoration(
gradient: neuGradient,
boxShadow: neuShadows,
);
/// Better yet, look into [Neu.boxDecoration].
Using a Neu
Object
On the other hand, this class may be used to construct new Neu
or
new Neu.toggle
objects. These objects will utilize their constructor
arguments to fill the above static method parameters for easy storage and
access or rapid redeployment.
Getter methods on new Neu
instantiated objects that consider initialized
properties:
SEE ALSO:
- NeuTextSpec, a container object for a few TextStyle-oriented
properties that a
Neu
object employs when calling buildTextStyle. These are individual parameters when calling textStyle. - NeuContainer, a specialized widget that stacks two AnimatedContainers rigged to easily handle Neumorphic design decorations, including the built-in consideration of NeuContainer.insets which creates its own solid-color backdrop for the container in lieu of an existing background.
- NeuToggle, a further specialized NeuContainer that considers flag states to drive animations between various Curvatures and Swells by rendering with Neu.toggle while also handling its own GestureDetector.
- Mixed in types
Constructors
- Neu({Color color = lightWhite, int depth = defaultDepth, double spread = defaultSpread, Curvature curvature = Curvature.convex, Swell swell = Swell.emboss, Alignment lightSource = defaultLightSource, NeuTextSpec neuTextSpec = const NeuTextSpec(), BorderRadius borderRadius = BorderRadius.zero, ShapeBorder shape = defaultShape})
-
A Neumorphic, or new skeuomorphic,
helper class with a variety of static and instance methods for the simple
generation of shaded decorations conforming to the neumorphic design
concept.
const
- Neu.toggle({Color color = lightWhite, int depth = defaultDepth, double spread = defaultSpread, Alignment lightSource = defaultLightSource, bool isToggled = false, bool isFlat = false, bool isSuper = false, double depthMultiplier = defaultDepthMultiplier, double spreadMultiplier = defaultSpreadMultiplier, NeuTextSpec neuTextSpec = const NeuTextSpec(), BorderRadius borderRadius = BorderRadius.zero, ShapeBorder shape = defaultShape})
-
Construct a Neu.toggle to deploy neumorphic decorations that have two
states: either not toggled or toggled. Consider a raised,
Swell.embossed button as the output from the first state; then a
depressed, darker Swell.debossed button is the second state; controlled
via flag
isToggled
.const
Properties
- borderRadius → BorderRadius
-
Employed only by buildBoxDecoration. Default is BorderRadius.zero.
final
- buildBoxDecoration → BoxDecoration
-
Does not consider shape. Ignores neuTextSpec.
no setter
-
buildBoxShadows
→ List<
BoxShadow> -
Does not consider shape, borderRadius. Ignores neuTextSpec.
no setter
- buildLinearGradient → Gradient
-
Does not consider spread nor shape, borderRadius.
Ignores neuTextSpec.
no setter
- buildShapeDecoration → ShapeDecoration
-
Does not consider borderRadius. Ignores neuTextSpec.
no setter
- buildTextStyle → TextStyle
-
Does not consider shape, borderRadius.
no setter
- color → Color
-
With all Neu design the basis of these decorations is a color and a
depth. Color should ideally match with 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 largerdepth
increases the contrast of the shading of colors on either side of the decoration.final - curvature → Curvature
-
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, especially when combined
with a swell of Swell.emboss.
final
- depth → int
-
With all Neu methods 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 largerdepth
increases the contrast of the shading of colors on either side of the decoration.final - hashCode → int
-
The hash code for this object.
no setterinherited
- lightSource → Alignment
-
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.final - neuTextSpec → NeuTextSpec
-
Container object utilized only by buildTextStyle for
baseStyle
from which to copy TextStyle as well as Rect and TextDirection fields for painting a gradient atop the text instead of just a solid color.final - runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- shape → ShapeBorder
-
A ShapeBorder object provides a description of a shape for a decoration.
It can include information such as how round corners are to be or what the
border edges should look like.
final
- spread → double
-
In terms of Neumorphic Shadows, the argument spread is responsible
for determining how wide an area the effect covers and how blurry the
shadows appear.
final
- swell → Swell
-
A Swell is an overall depiction of how the decoration appears in terms
of being inset into the surface or extruded from it.
final
Methods
-
copyWith(
{Color? color, int? depth, Curvature? curvature, Swell? swell, double? spread, Alignment? lightSource, NeuTextSpec? neuTextSpec, BorderRadius? borderRadius, ShapeBorder? shape}) → Neu -
📋 Create a
new Neu
object that has the same properties asthis
one except for any optional parameters passed through this copyWith method. -
copyWithToggle(
{Color? color, int? depth, double? spread, Alignment? lightSource, bool? isToggled, bool? isFlat, bool? isSuper, double? depthMultiplier, double? spreadMultiplier, NeuTextSpec? neuTextSpec, BorderRadius? borderRadius, ShapeBorder? shape}) → Neu -
📋 Create a
new Neu.toggle
object that has the same properties asthis
one except for any optional parameters passed through this copyWithToggle method. -
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
override
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringShort(
) → String -
A brief description of this object, usually just the runtimeType and the
hashCode.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited
Static Methods
-
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 - TODO: Write doc.
-
boxShadows(
{required Color color, required int depth, Curvature curvature = Curvature.convex, Swell swell = Swell.emboss, double spread = defaultSpread, Alignment lightSource = defaultLightSource, double scale = 1.0, double offsetScalar = 1.0}) → List< BoxShadow> - TODO: Write more details.
-
linearGradient(
{required Color color, required int depth, Curvature curvature = Curvature.convex, Swell swell = Swell.emboss, Alignment begin = defaultLightSource, TileMode tileMode = TileMode.clamp, GradientTransform? transform}) → Gradient -
Build a Neumorphic LinearGradient, the Gradient.colors for which
are determined by evaluating
color
,depth
, and the rest of the Neu-standard parameters. -
shapeDecoration(
{required Color color, required int depth, Curvature curvature = Curvature.flat, Swell swell = Swell.emboss, double spread = defaultSpread, Alignment lightSource = defaultLightSource, ShapeBorder shape = const RoundedRectangleBorder(), DecorationImage? image}) → ShapeDecoration - TODO: Write doc.
-
textStyle(
{TextStyle baseStyle = const TextStyle(), required Color color, required int depth, Curvature curvature = Curvature.flat, Swell swell = Swell.emboss, double spread = 5, AlignmentGeometry lightSource = defaultLightSource, Rect? gradientRect, TextDirection? textDirection}) → TextStyle -
Build a Neumorphic TextStyle that begins with
baseStyle
.