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

  Neumorphic, Templates, Theme, UI

flutter_neumorphic

top_banner

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

Try Flutter-Neumorphic on your browser :  https://flutter-neumorphic.firebaseapp.com/ 

neumorphic_playground

 Installation

https://pub.dev/packages/flutter_neumorphic

dependencies:
  flutter_neumorphic: ^1.0.7

The in your .dart files

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

 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
NeumorphicToggleAn mutiple value toggle, associated with a selecteedIndex
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
NeumorphicBackgroundTake the background color of the theme, can clip the screen with a borderRadius

 Showcases

Neumorphic
Neumorphic
Neumorphic
Neumorphic

 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
point_up

 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

 Custom Shape

custom_shape

Flutter Neumorphic supports custom shapes, just provide a path to

class MyShapePathProvider extends NeumorphicPathProvider {
  @override
  bool shouldReclip(NeumorphicPathProvider oldClipper) {
    return true;
  }

  @override
  Path getPath(Size size) {
    return Path()
      ..moveTo(0, 0)
      ..lineTo(size.width/2, 0)
      ..lineTo(size.width, size.height/2)
      ..lineTo(size.width/2, size.height/2)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
  }
}

And use NeumorphicBoxShape.path

Neumorphic(
  shape: NeumorphicBoxShape.path(MyShapePathProvider())
  ...
),

 Neumorphic Theme

neumorphic_theme
neumorphic_theme
NeumorphicTheme(
    usedTheme: UsedTheme.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.currentTheme(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){
  
}

What’s 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”.

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.

 License

Flutter-Neumorphic is released under the Apache2 license. See LICENSE for details.

If you use the open-source library in your project, please make sure to credit and backlink to www.idean.com

bottom_banner

Download Neumorphic ui kit Source code on GitHub

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