flutter_neumorphic 1.0.3+1

  • Readme
  • Changelog
  • Example
  • Installing
  • 90

flutter_neumorphic #

top_banner

neumorphic_widget neumorphic_widget

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

pub package pub package

dependencies:
  flutter_neumorphic: ^1.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 #

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
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
NeumorphicIndicator A vertical / horizontal indicator bar, takes a percentage
NeumorphicBackground Take 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 #

Shape Widget Image Condition
Flat depth >= 0 && shape == Flat
Convex depth >= 0 && shape == Convex
Concave depth >= 0 && shape == Concave
Emboss depth < 0

🎨 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){
  
}

πŸ‘₯ Contributors #

Contributors
florentFlorent Champigny
olivierOlivier Bonvila
gylGyl Jean Lambert

πŸ“„ 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

1.0.4 #

  • Added NeumorphicToggle widget

1.0.3 #

  • Added a disableDepth boolean configuration in theme & styles

1.0.2+2 #

  • Some widgets are now stateless

1.0.2+1 #

  • Fixed default padding of checkboxes

1.0.2 #

  • Fixed changing size/rotate re-draw bug
  • BoxShape is not anymore an element of Style
  • Added isEnable property on multiple widgets
  • Refactored the Sample
  • Tried support for web & desktop (mac)
  • Added surfaceIntensity (for concave / convex)
  • Small changes on Neumorphic colors (less dark)
  • Removed border (add Neumorphic inside Neumorphic to reproduce)

1.0.1 #

  • Improved performances
  • Renamed CurrentTheme to UsedTheme in NeumorphicTheme (Dark, Light, System)
  • Renamed NeumorphicTheme.getCurrentTheme(context) to NeumorphicTheme.currentTheme(context)
  • Fixed flickering effect when theme changes

1.0.0+1 #

  • Added missing authors emails

1.0.0 #

  • First release of Flutter-Neumorphic
  • Added concave/convex/flat/emboss container decoration
  • Added a lot of widgets (button, container, radio, checkbox, etc.)
  • Added some samples

0.0.1 #

  • initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

import 'main_home.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NeumorphicTheme(
          usedTheme: UsedTheme.LIGHT,
          theme: NeumorphicThemeData(
            baseColor: Color(0xFFFFFFFF),
            intensity: 0.5,
            lightSource: LightSource.topLeft,
            depth: 10,
          ),
          darkTheme: NeumorphicThemeData(
            baseColor: Color(0xFF3E3E3E),
            intensity: 0.5,
            lightSource: LightSource.topLeft,
            depth: 6,
          ),
          child: MyHomePage()),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: NeumorphicTheme.baseColor(context),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            NeumorphicButton(
              onClick: () {
                print("onClick");
              },
              style: NeumorphicStyle(shape: NeumorphicShape.flat),
              boxShape: NeumorphicBoxShape.circle(),
              padding: const EdgeInsets.all(12.0),
              child: Icon(
                Icons.favorite_border,
                color: _iconsColor(context),
              ),
            ),
            NeumorphicButton(
                margin: EdgeInsets.only(top: 12),
                onClick: () {
                  NeumorphicTheme.of(context).usedTheme = NeumorphicTheme.isUsingDark(context) ? UsedTheme.LIGHT : UsedTheme.DARK;
                },
                style: NeumorphicStyle(shape: NeumorphicShape.flat),
                boxShape: NeumorphicBoxShape.roundRect(borderRadius: BorderRadius.circular(8)),
                padding: const EdgeInsets.all(12.0),
                child: Text(
                  "Toggle Theme",
                  style: TextStyle(color: _textColor(context)),
                )),
            NeumorphicButton(
                margin: EdgeInsets.only(top: 12),
                onClick: () {
                  Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) {
                    return FullSampleHomePage();
                  }));
                },
                style: NeumorphicStyle(shape: NeumorphicShape.flat),
                boxShape: NeumorphicBoxShape.roundRect(borderRadius: BorderRadius.circular(8)),
                padding: const EdgeInsets.all(12.0),
                child: Text(
                  "Go to full sample",
                  style: TextStyle(color: _textColor(context)),
                )),
          ],
        ),
      ),
    );
  }

  Color _iconsColor(BuildContext context) {
    final theme = NeumorphicTheme.of(context);
    if (theme.isUsingDark) {
      return theme.current.accentColor;
    } else {
      return null;
    }
  }

  Color _textColor(BuildContext context) {
    if (NeumorphicTheme.isUsingDark(context)) {
      return Colors.white;
    } else {
      return Colors.black;
    }
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_neumorphic: ^1.0.3+1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_neumorphic/flutter_neumorphic.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Apr 1, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/generated/i18n.dart.

Run flutter format to format lib/generated/i18n.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test