Create amazing neumorphic designs with flutter_neumorphic package

A complete, ready to use, Neumorphic UI kit for Flutter. Create beautiful neumorphic Buttons, Texts, Check Boxes, Icons, etc.
You can create a complete flutter app with flutter neumorphism.

Try Flutter-Neumorphic on your Web browser, Here is the link for it. : https://flutter-neumorphic.firebaseapp.com/ 

Installation Procedure:

dependencies:
  flutter_neumorphic: ^3.0.1

//requires flutter > 1.13.18

Then in your example.dart files call this package by simply copy and paste it where you need this package.

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

Different Types Of Widgets:


1. Neumorphic

The main Neumorphic Widget, a container that adds a white/dark gradient depending on a light source and a depth.

2. NeumorphicButton

A neumorphic button that plays with the depth to respond to user interaction.

3. NeumorphicRadio

A set of neumorphic buttons which only one selected at a time, depending on a value and group value.

4. NeumorphicCheckbox

A button associated with a value can be checked/unchecked, if checked, takes the accent color.

5. NeumorphicText

A Neumorphic text (only work with positive depth)

6. NeumorphicIcon

A Neumorphic icon (only work with positive depth)

7. material.TextField

For TextFields, just surround your existing material text field widget with a Neumorphic (container)

8. NeumorphicSwitch
An On/Off toggle, associated with a value, if toggled, takes the accent color

9. NeumorphicToggle

A multiple value toggle, associated with a selected index

10. NeumorphicSlider

A Neumorphic seek bar (range slider), the user can select a value in a range

11. NeumorphicProgress
Determinate progress takes the displayed percentage

12. NeumorphicIndeterminateProgress

An indeterminate progress-bar

13. NeumorphicBackground

Take the background color of the theme, can clip the screen with a borderRadius

14. NeumorphicApp

An application that uses Neumorphic design. Handle theme, navigation, localisation, and much more

15. NeumorphicAppBar

A Neumorphhic design app bar. Can be used inside Scaffold

Here Are Some Showcases And Samples For This Package:

LogIn And SignUp Form

A Neumorphic Flutter Clock, Neumorphic Texts And Neumorphic Bar Charts and Analytics.

Neumorphic

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(borderRadius: 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 specific 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 circles 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 Tewt 

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 to an Accessibility Provider) with isEnabled

border: NeumorphicBorder(
    isEnabled: true,
    color: Color(0x33000000),
    width: 0.8,
)

Note that borderColor and borderWidth default values have been added to NeumorphicThemeData

🎨 Neumorphic Themes 

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 currently 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).isUsingDarkMode){
  
}

NeumorphicApp

You can use directly in your project a NeumorphicApp, surrounding your code

It handles 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 o
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.