Neumorphic UI kit for Flutter

  Neumorphic, packages, UI, Widgets

Info: A complete, ready to use, Neumorphic UI kit for Flutter, ????️ dark mode compatible.

flutter_neumorphic

top_banner
neumorphic_widget
neumorphic_widget

A complete, ready to use, Neumorphic ui kit for Flutter

⚙️ Installation

https://pub.dev/packages/flutter_neumorphic

dependencies:
  flutter_neumorphic: ^1.0.0+3

The in your .dart files

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

What’s neumorphic

neumorphic

Material Cards

A Modern / Material (upgraded) card usually is a surface floating on top of our perceived background and casting a shadow onto it. The shadow both gives it depth and also in many cases defines the shape itself — as it’s quite often borderless.

Neumorphic cards

Neumorphic card however pretends to extrude from the background. It’s a raised shape made from the exact same material as the background. When we look at it from the side we see that it doesn’t “float”.

neumorphic_button

Here’s a Nereumorphic Button tap (slowed x2) from the sample app, you can see how the element seems to change its depth to its surface.

???? Widgets

PreviewWidgetDescription
NeumorphicThe main Neumorphic Widget, a container which adds white/dark gradient depending on a lightsource and a depth
NeumorphicButtonA neumorphic button that plays with the depth to respond to user interraction
NeumorphicRadioA set of neumorphic button whith only one selected at time, depending on a value and groupValue
NeumorphicCheckboxA button associated with a value, can be checked/unckecked, if checked, takes the accent color
NeumorphicSwitchAn On/Off toggle, associated with a value, if toggled, takes the accent color
NeumorphicSliderA Neumorphic seekbar (range slider), the user can select a value in a range
NeumorphicProgressA determinate progress, takes the displayed percentage
NeumorphicIndeterminateProgressAn inderminate progress-bar
NeumorphicIndicatorA vertical / horizontal indicator bar, takes a percentage
NeumorphicBackgroundTake the background color of the theme, can clip the screen with a borderRadius

???? Neumorphic

Neumorphic(
  boxShape: NeumorphicBoxShape.roundRect(borderRadius: BorderRadius.circular(12)), 
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey
  ),
  child: ...
)
Neumorphic
Neumorphic

☝️ Playing with LightSource & Depth

????️ Attributes

AttributesValuesDescription
LightSourceTopLeft, BottomRight, etc. / (dx, dy)The source of light specifit to the theme or the widget, used to project white/dark shadows on neumorphic elements
ShapeConcave / Convex / FlatThe shape of the curve used in the neumorphic container
Depth-20 <= double <= 20The distance of the widget to his parent. Can be negative => emboss. It influences on the shadow’s color and its size/blur
Intensity0 <= double <= 1The intensity of the Light, it influences on the shadow’s color
Colorany ColorThe default color of Neumorphic elements
Accentany ColorThe default accent color of the Neumorphic element when activated (eg: checkbox)
Variantany ColorThe default secondary color of the Neumorphic element (eg: used as second color on the progress gradient)
BoxShapeCircle, RoundRect(radius), StadiumThe box shape of a Neumorphic element. Stadium : roundrect with cirlces on each side

???? Shapes

ShapeWidgetImageCondition
Flatdepth >= 0 && shape == Flat
Convexdepth >= 0 && shape == Convex
Concavedepth >= 0 && shape == Concave
Embossdepth < 0

???? Neumorphic Theme

neumorphic_theme
neumorphic_theme
NeumorphicTheme(
    currentTheme: CurrentTheme.LIGHT, //or DARK / SYSTEM
    darkTheme: NeumorphicThemeData(
        baseColor: Color(0xff333333),
        accentColor: Colors.green,
        lightSource: LightSource.topLeft,
        depth: 4,
        intensity: 0.3,
    ),
    theme: NeumorphicThemeData(
        baseColor: Color(0xffDDDDDD),
        accentColor: Colors.cyan,
        lightSource: LightSource.topLeft,
        depth: 6,
        intensity: 0.5,
    ),
    child: ...
)

To retrieve the current used theme :

final theme = NeumorphicTheme.getCurrentTheme(context);
final baseColor = theme.baseColor;
final accentColor = theme.accentColor;
...

Toggle from light to dark

NeumorphicTheme.of(context).currentTheme = CurrentTheme.DARK;

Know if using dark

if(NeumorphicTheme.of(context).isUsingDarkMode){
  
}

Download Flutter-Neumorphic UI Kit Source Code on GitHub

https://github.com/Idean/Flutter-Neumorphic