flutter_neumorphic

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

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

⚙️ 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

<table> <thead> <tr> <th>Preview</th> <th>Widget</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/container.gif"/></td> <td>Neumorphic</td> <td>The main Neumorphic Widget, a container which adds white/dark gradient depending on a lightsource and a depth </td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/button.gif"/></td> <td>NeumorphicButton</td> <td>A neumorphic button that plays with the depth to respond to user interraction</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/radio.gif"/></td> <td>NeumorphicRadio</td> <td>A set of neumorphic button whith only one selected at time, depending on a value and groupValue</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/checkbox.gif"/></td> <td>NeumorphicCheckbox</td> <td> A button associated with a value, can be checked/unckecked, if checked, takes the accent color</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/text.png"/></td> <td>NeumorphicText</td> <td>A Neumorphic text (only work with positive depth)</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/icon.png"/></td> <td>NeumorphicIcon</td> <td>A Neumorphic icon (only work with positive depth)</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/textfield.png"/></td> <td>material.TextField</td> <td>For TextFields, just surround your existing material textfield widget with a Neumorphic (container)</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/switch.gif"/> </td> <td>NeumorphicSwitch</td> <td>An On/Off toggle, associated with a value, if toggled, takes the accent color </td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/toggle.gif"/> </td> <td>NeumorphicToggle</td> <td>An mutiple value toggle, associated with a selecteedIndex</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/slider.gif"/></td> <td>NeumorphicSlider</td> <td>A Neumorphic seekbar (range slider), the user can select a value in a range</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/progress.gif"/></td> <td>NeumorphicProgress</td> <td>A determinate progress, takes the displayed percentage</td> </tr> <tr> <td><img width="300px"src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/indeterminate.gif"/> </td> <td>NeumorphicProgressIndeterminate</td> <td>An inderminate progress-bar</td> </tr> <tr> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/background.png"/> </td> <td>NeumorphicBackground</td> <td>Take the background color of the theme, can clip the screen with a borderRadius</td> </tr> <tr> <td><img width="300px" src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/background.png"/> </td> <td>NeumorphicApp</td> <td>An application that uses Neumorphic design. Handle theme, navigation, localisation, and much more</td> </tr> <tr> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/app_bar.png"/> </td> <td>NeumorphicAppBar</td> <td>A Neumorphhic design app bar. Can be used inside Scaffold</td> </tr> </tbody> </table>

👀 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

<table> <thead> <tr> <th>Shape</th> <th>Widget</th> <th>Image</th> <th>Condition</th> </tr> </thead> <tbody> <tr> <td>Flat</td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_flat.png"/></td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/flat.png"/> </td> <td>depth >= 0 && shape == Flat</td> </tr> <tr> <td>Convex</td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_convex.png"/></td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/convex.png"/> </td> <td>depth >= 0 && shape == Convex</td> </tr> <tr> <td>Concave</td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_concave.png"/></td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/concave.png"/> </td> <td>depth >= 0 && shape == Concave</td> </tr> <tr> <td>Emboss</td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_emboss.png"/></td> <td><img src="https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/emboss.png"/> </td> <td>depth < 0</td> </tr> </tbody> </table>

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

[](