Neu.toggle constructor

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.

Further refine the appearance of the decorations with either mutually-exclusive flag isFlat, which enforces the usage of Curvature.flat regardless of isToggled state; or isSuper, which opts into using Curvatures and Swells that fit the Degree.SUPER description, increasing intensity and contrast.

When in a state of isToggled == true, the arguments to depthMultiplier and spreadMultiplier are applied to depth and spread automatically. To remove this effect, pass a value of 1.0 for these multipliers.

---

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.
• new Neu the default constructor which allows manual control of Curvature and Swell.
• NeuToggle, a specialized NeuContainer that animates its rendered Neu.toggle decorations while also handling its own GestureDetector.
• Neu static methods that expect to be provided parameters (or allowed to default) with no object instantiation:
  • linearGradient
  • textStyle
  • boxShadows
  • boxDecoration
  • shapeDecoration

---

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 Curvatures 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.

Implementation

const Neu.toggle({
  this.color = lightWhite,
  this.depth = defaultDepth,
  this.spread = defaultSpread,
  this.lightSource = defaultLightSource,
  bool isToggled = false,
  bool isFlat = false,
  bool isSuper = false,
  double depthMultiplier = defaultDepthMultiplier,
  double spreadMultiplier = defaultSpreadMultiplier,
  this.neuTextSpec = const NeuTextSpec(),
  this.borderRadius = BorderRadius.zero,
  this.shape = defaultShape,
})  : _isToggled = isToggled,
      _isFlat = isFlat,
      _isSuper = isSuper,
      _depthMultiplier = depthMultiplier,
      _spreadMultiplier = spreadMultiplier,
      curvature = isFlat
          ? Curvature.flat
          : isToggled
              ? isSuper
                  ? Curvature.superconcave
                  : Curvature.concave
              : isSuper
                  ? Curvature.superconvex
                  : Curvature.convex,
      swell = isToggled
          ? isSuper
              ? Swell.superdeboss
              : Swell.deboss
          : isSuper
              ? Swell.superemboss
              : Swell.emboss;