flutter_neumorphic

a complete, ready to use, neumorphic ui kit for flutter.

⚙️ installation

https://pub.dev/packages/flutter_neumorphic

dependencies:
  flutter_neumorphic: ^3.0.3

//requires flutter > 1.13.18

the in your .dart files

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

�� widgets

preview	widget	description
	neumorphic	the main neumorphic widget, a container which adds white/dark gradient depending on a lightsource and a depth
	neumorphicbutton	a neumorphic button that plays with the depth to respond to user interraction
	neumorphicradio	a set of neumorphic button whith only one selected at time, depending on a value and groupvalue
	neumorphiccheckbox	a button associated with a value, can be checked/unckecked, if checked, takes the accent color
	neumorphictext	a neumorphic text (only work with positive depth)
	neumorphicicon	a neumorphic icon (only work with positive depth)
	material.textfield	for textfields, just surround your existing material textfield widget with a neumorphic (container)
	neumorphicswitch	an on/off toggle, associated with a value, if toggled, takes the accent color
	neumorphictoggle	an mutiple value toggle, associated with a selecteedindex
	neumorphicslider	a neumorphic seekbar (range slider), the user can select a value in a range
	neumorphicprogress	a determinate progress, takes the displayed percentage
	neumorphicindeterminateprogress	an inderminate progress-bar
	neumorphicbackground	take the background color of the theme, can clip the screen with a borderradius
	neumorphicapp	an application that uses neumorphic design. handle theme, navigation, localisation, and much more
	neumorphicappbar	a neumorphhic design app bar. can be used inside scaffold

�� showcases

�� neumorphic

neumorphic(
  style: neumorphicstyle(
    shape: neumorphicshape.concave,
    boxshape: neumorphicboxshape.roundrect(borderradius.circular(12)), 
    depth: 8,
    lightsource: lightsource.topleft,
    color: colors.grey
  ),
  child: ...
)

☝️ playing with lightsource & depth

��️ attributes

attributes	values	description
lightsource	topleft, bottomright, etc. / (dx, dy)	the source of light specifit to the theme or the widget, used to project white/dark shadows on neumorphic elements
shape	concave / convex / flat	the shape of the curve used in the neumorphic container
depth	-20 <= double <= 20	the distance of the widget to his parent. can be negative => emboss. it influences on the shadow’s color and its size/blur
intensity	0 <= double <= 1	the intensity of the light, it influences on the shadow’s color
surfaceintensity	0 <= double <= 1	the intensity of the surface, it influences on the concave/convex darkness
color	any color	the default color of neumorphic elements
accent	any color	the default accent color of the neumorphic element when activated (eg: checkbox)
variant	any color	the default secondary color of the neumorphic element (eg: used as second color on the progress gradient)
boxshape	circle, roundrect(radius), stadium, path	the box shape of a neumorphic element. stadium : roundrect with cirlces on each side
border	neumorphicborder	a border (color/width) to enhance contrast with background and others elements

�� shapes

shape	widget	image	condition
flat			depth >= 0 && shape == flat
convex			depth >= 0 && shape == convex
concave			depth >= 0 && shape == concave
emboss			depth < 0

neumorphic text

text only handle positive depth

child: neumorphictext(
        "i love flutter",
        style: neumorphicstyle(
          depth: 4,  //customize depth here
          color: colors.white, //customize color here
        ),
        textstyle: neumorphictextstyle(
          fontsize: 18, //customize size here
          // and others usual text style properties (fontfamily, fontweight, ...)
        ),
    ),

neumorphic icon

child: neumorphicicon(
        icons.add_circle,
        size: 80,
    ),

how to display svg icons ?

simply use https://fluttericon.com/ to export your svg as .ttf & use neumorphicicon(your_icon)

�� 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(
  style: neumorphicstyle(
     boxshape: neumorphicboxshape.path(myshapepathprovider()),
  ),
  ...
),

you can import the flutter logo as a custom shape using

neumorphic(
  style: neumorphicstyle(
    shape: neumorphicboxshape.path(neumorphicflutterlogopathprovider()),
  ),
  ...
),

�� accessibility / border

for design purposes, or simply to enhance accessibility,
you can add a border on neumorphic widgets

neumorphic(
      style: neumorphicstyle(
        border: neumorphicborder(
          color: color(0x33000000),
          width: 0.8,
        )
      ),
      ...
)

you can enable/disable it (eg: listening an accessibility provider) with isenabled

border: neumorphicborder(
    isenabled: true,
    color: color(0x33000000),
    width: 0.8,
)

note that bordercolor and borderwidth default values has been added to neumorphicthemedata

�� neumorphic theme

neumorphictheme(
    thememode: thememode.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).thememode = thememode.dark;

know if using dark

if(neumorphictheme.of(context).isusingdark){
  
}

neumorphicapp

you can use direcly in your project a neumorphicapp, surrounding your code

it handle directly neumorphictheme & navigation (and all possibilities of materialapp )

void main() => runapp(myapp());

class myapp extends statelesswidget {
  // this widget is the root of your application.
  @override
  widget build(buildcontext context) {
    return neumorphicapp(
      debugshowcheckedmodebanner: false,
      title: 'neumorphic app',
      thememode: thememode.light,
      theme: neumorphicthemedata(
        basecolor: color(0xffffffff),
        lightsource: lightsource.topleft,
        depth: 10,
      ),
      darktheme: neumorphicthemedata(
        basecolor: color(0xff3e3e3e),
        lightsource: lightsource.topleft,
        depth: 6,
      ),
      home: myhomepage(),
    );
  }
}

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.