A complete, ready to use, Neumorphic ui kit for Flutter, ๐Ÿ•ถ๏ธ dark mode compatible

Overview

flutter_neumorphic

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

flutter_logo

Try Flutter-Neumorphic on your browser : ๐Ÿ‘‰ https://flutter-neumorphic.firebaseapp.com/ ๐ŸŒ

neumorphic_playground

โš™๏ธ Installation

https://pub.dev/packages/flutter_neumorphic

pub package pub package

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
NeumorphicProgressIndeterminate 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

Neumorphic Neumorphic

๐Ÿ“ฆ Neumorphic

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)), 
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey
  ),
  child: ...
)

Neumorphic Neumorphic

โ˜๏ธ 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

Neumorphic Neumorphic Neumorphic Neumorphic

๐Ÿ”ง 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

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

custom_shape

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

๐ŸŽจ 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(
  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

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

neumorphic_theme 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

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.

๐Ÿ‘ฅ Contributors

Contributors
florent Florent Champigny
olivier Olivier Bonvila
gyl Gyl Jean Lambert
jaumard Jimmy Aumard
Overman775 Overman775
schopy schopy

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

Comments
  • Error: 'AnimatedScale' is imported from both

    Error: 'AnimatedScale' is imported from both

    Have next error when run build for ios

    /flutter_neumorphic-3.1.0/lib/src/widget/switch.dart:167:20: 
    Error: 
      'AnimatedScale' is imported 
    from both 'package:flutter/src/widgets/implicit_animations.dart'  and
     'package:flutter_neumorphic/src/widget/animation/animated_scale.dart'.
    
    Flutter 2.4.0-4.0.pre โ€ข channel dev โ€ข https://github.com/flutter/flutter.git
    Framework โ€ข revision cc00e7e6bc (4 days ago) โ€ข 2021-07-11 18:21:02 -0400
    Engine โ€ข revision ed25e8f01e
    Tools โ€ข Dart 2.14.0 (build 2.14.0-301.0.dev)
    
    opened by shalom-aviv 16
  • Flutter_Neumorphic Not working with flutter version 2.5.2

    Flutter_Neumorphic Not working with flutter version 2.5.2

    PS C:\Users\Dell G3-3500\Desktop\Internship Grow90\edu_app> flutter run Using hardware rendering with device sdk gphone x86 arm. If you notice graphics artifacts, consider enabling software rendering with "--enable-software-rendering". Launching lib\main.dart on sdk gphone x86 arm in debug mode... /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_neumorphic-3.1.0/lib/src/widget/button.dart:200:14: Error: 'AnimatedScale' is imported from both 'package:flutter/src/widgets/implicit_animations.dart' and 'package:flutter_neumorphic/src/widget/animation/animated_scale.dart'. child: AnimatedScale( ^^^^^^^^^^^^^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_neumorphic-3.1.0/lib/src/widget/switch.dart:167: 'package:flutter_neumorphic/src/widget/animation/animated_scale.dart'. child: AnimatedScale( ^^^^^^^^^^^^^

    FAILURE: Build failed with an exception.

    • Where: Script 'C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1005

    • What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command 'C:\src\flutter\bin\flutter.bat'' finished with non-zero exit value 1

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 58s

    opened by shaikhafzaal2 14
  • Neumorphic AppBar

    Neumorphic AppBar

    Currently if you try to use the material appBar and put neumorphic button on it it will be weird as the effect is cut by the size of the appBar. Would be nice to have a appBar specific to neumorphic that allow you to do: Capture dโ€™รฉcran 2020-05-27 ร  14 47 39 directly out of the box instead of doing it under Scaffold body manually

    enhancement widget 
    opened by jaumard 14
  • Conflict of AnimatedScale with Flutter 2.5.0

    Conflict of AnimatedScale with Flutter 2.5.0

    Error: 'AnimatedScale' is imported from both 'package:flutter/src/widgets/implicit_animations.dart' and 'package:flutter_neumorphic/src/widget/animation/animated_scale.dart'

    After Flutter 2.5.0 release AnimatedScale is conflicting with flutter's implicit_animations.dart

    Will create a PR to resolve it ASAP.

    opened by tsvillain 12
  • General usage

    General usage

    Here is just a general feedback after few days of use :)

    I really like using this design system, but there is few things that I don't like:

    • some naming are not consistent with flutter naming, example: onClick on button where it's onPressed on official designs like material or Cupertino.
    • have to use material stuff
    • have to always get theming colors to put in text Text("...", style:TextStyle(color: NeumorphicTheme.defaultTextColor(context)),
    • sometime having some fields that are not supported (like #120)

    I understand that you don't want to redo everything material does. But I'm wondering if there is an hybrid solution where material stuff are hidden.

    For example we can have a NeumorphicApp that under the hood setup a MaterialApp and compute the theming from a NeumorphicTheme, that will fix the need of putting NeumorphicTheme.defaultTextColor everywhere and redefining theme twice (neumorphic + material).

    That would be a good start :)

    Another things (but maybe a bit not necessary) would be to have export 'package:flutter/material.dart' show TextField, Dialog...; to give the illusion that neumorphic have it all ^^

    Because when you use a design system you don't want to fill the blank with another one.

    My 2 cents guys ;) keep the good work!

    opened by jaumard 12
  • Its possible to choose color ?

    Its possible to choose color ?

    Hi, its possible to choose the color of the shadows? For example:

    Neumorphic(
                style: NeumorphicStyle(
                  firstColor: Colors.white, <----
                  secondColor: Colors.black, <----
                ),
                boxShape: NeumorphicBoxShape.circle(), 
                child: Icon(Icons.star_border, size: 17, color: Theme.of(context).accentColor)
    )
    
    opened by yacineblr 10
  • [web] Expected a value of type 'SkDeletable', but got one of type 'Null'

    [web] Expected a value of type 'SkDeletable', but got one of type 'Null'

    When using a NeumorphicButton in the web with canvaskit, all disabled or pressed buttons are not displayed.

    โ•โ•โ•ก EXCEPTION CAUGHT BY RENDERING LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
    The following TypeErrorImpl was thrown during paint():
    Expected a value of type 'SkDeletable', but got one of type 'Null'
    
    The relevant error-causing widget was:
      AnimatedContainer
      file:///Users/*/.pub-cache/hosted/pub.dartlang.org/flutter_neumorphic-3.0.3/lib/src/widget/container.dart:120:14
    
    When the exception was thrown, this was the stack:
    dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49         throw_
    dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 84:3           castError
    dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/types.dart 266:34          as
    lib/_engine/engine/canvaskit/skia_object_cache.dart 146:55                           new
    lib/_engine/engine/canvaskit/mask_filter.dart 10:3                                   blur
    lib/_engine/engine/canvaskit/painting.dart 141:36                                    set maskFilter
    packages/flutter_neumorphic/src/decoration/neumorphic_decoration_painter.dart 79:26  <fn>
    packages/flutter_neumorphic/src/decoration/neumorphic_decoration_painter.dart 79:46  [_updateCache]
    packages/flutter_neumorphic/src/decoration/neumorphic_decoration_painter.dart 104:5  paint
    packages/flutter/src/rendering/proxy_box.dart 2146:7                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/proxy_box.dart 2165:11                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/shifted_box.dart 72:14                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/proxy_box.dart 2369:15                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/box.dart 2784:14                                      defaultPaint
    packages/flutter/src/rendering/flex.dart 1079:7                                      paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 140:10                                    _repaintCompositedChild
    packages/flutter/src/rendering/object.dart 100:5                                     repaintCompositedChild
    packages/flutter/src/rendering/object.dart 206:7                                     [_compositeChild]
    packages/flutter/src/rendering/object.dart 187:7                                     paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/sliver_multi_box_adaptor.dart 641:16                  paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/sliver_padding.dart 274:14                            paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/viewport.dart 650:16                                  [_paintContents]
    packages/flutter/src/rendering/object.dart 396:12                                    pushLayer
    packages/flutter/src/rendering/object.dart 452:7                                     pushClipRect
    packages/flutter/src/rendering/viewport.dart 637:31                                  paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 140:10                                    _repaintCompositedChild
    packages/flutter/src/rendering/object.dart 100:5                                     repaintCompositedChild
    packages/flutter/src/rendering/object.dart 206:7                                     [_compositeChild]
    packages/flutter/src/rendering/object.dart 187:7                                     paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/widgets/layout_builder.dart 384:14                              paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/widgets/layout_builder.dart 384:14                              paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/shifted_box.dart 72:14                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 396:12                                    pushLayer
    packages/flutter/src/rendering/object.dart 524:7                                     pushClipPath
    packages/flutter/src/rendering/proxy_box.dart 1693:22                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/shifted_box.dart 72:14                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/proxy_box.dart 2165:11                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/proxy_box.dart 2165:11                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/shifted_box.dart 72:14                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/box.dart 2784:14                                      defaultPaint
    packages/flutter/src/rendering/flex.dart 1079:7                                      paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/widgets/layout_builder.dart 384:14                              paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/shifted_box.dart 72:14                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/box.dart 2784:14                                      defaultPaint
    packages/flutter/src/rendering/custom_layout.dart 412:5                              paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/material/material.dart 551:11                                   paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 396:12                                    pushLayer
    packages/flutter/src/rendering/proxy_box.dart 1925:14                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 140:10                                    _repaintCompositedChild
    packages/flutter/src/rendering/object.dart 100:5                                     repaintCompositedChild
    packages/flutter/src/rendering/object.dart 206:7                                     [_compositeChild]
    packages/flutter/src/rendering/object.dart 187:7                                     paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/proxy_box.dart 2715:13                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 140:10                                    _repaintCompositedChild
    packages/flutter/src/rendering/object.dart 100:5                                     repaintCompositedChild
    packages/flutter/src/rendering/object.dart 206:7                                     [_compositeChild]
    packages/flutter/src/rendering/object.dart 187:7                                     paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/proxy_box.dart 3375:11                                paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/widgets/overlay.dart 780:14                                     paintStack
    packages/flutter/src/widgets/overlay.dart 792:7                                      paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/custom_paint.dart 580:11                              paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/proxy_box.dart 142:14                                 paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 189:12                                    paintChild
    packages/flutter/src/rendering/view.dart 213:14                                      paint
    packages/flutter/src/rendering/object.dart 2315:7                                    [_paintWithContext]
    packages/flutter/src/rendering/object.dart 140:10                                    _repaintCompositedChild
    packages/flutter/src/rendering/object.dart 100:5                                     repaintCompositedChild
    packages/flutter/src/rendering/object.dart 978:29                                    flushPaint
    packages/flutter/src/rendering/binding.dart 455:19                                   drawFrame
    packages/flutter/src/widgets/binding.dart 870:13                                     drawFrame
    packages/flutter/src/rendering/binding.dart 319:5                                    [_handlePersistentFrameCallback]
    packages/flutter/src/scheduler/binding.dart 1144:15                                  [_invokeFrameCallback]
    packages/flutter/src/scheduler/binding.dart 1082:9                                   handleDrawFrame
    packages/flutter/src/scheduler/binding.dart 865:7                                    <fn>
    dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19              internalCallback
    
    The following RenderObject was being processed when the exception was fired: RenderDecoratedBox#70d60 relayoutBoundary=up12:
      creator: DecoratedBox โ† DecoratedBox โ† Padding โ† Container โ† AnimatedContainer โ† DefaultTextStyle โ†
        _NeumorphicContainer โ† Neumorphic โ† Transform โ† ScaleTransition โ† AnimatedScale โ† Listener โ† โ‹ฏ
      parentData: <none> (can use size)
      constraints: BoxConstraints(w=180.0, 0.0<=h<=Infinity)
      size: Size(180.0, 240.0)
      โ”œโ”€decoration: NeumorphicDecoration
      configuration: ImageConfiguration(bundle: PlatformAssetBundle#47a50(), devicePixelRatio: 1.0,
        locale: en_US, textDirection: TextDirection.ltr, platform: macOS)
    This RenderObject had the following descendants (showing up to depth 5):
        child: RenderPadding#b09b5 relayoutBoundary=up13 NEEDS-PAINT
          child: RenderClipPath#c4e48 relayoutBoundary=up14 NEEDS-PAINT
            child: RenderPadding#6e8a1 relayoutBoundary=up15 NEEDS-PAINT
              child: RenderAspectRatio#c42b5 relayoutBoundary=up16 NEEDS-PAINT
                child: RenderConstrainedBox#d2a08 NEEDS-PAINT
    โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
    
    opened by kidok313 8
  • NeumorphicStyle, boxShape isn't defined in the scope

    NeumorphicStyle, boxShape isn't defined in the scope

    Neumorphic(
                style: NeumorphicStyle(
                  shape: NeumorphicShape.concave,
                  boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12),),
                  depth: 8,
                  lightSource: LightSource.topLeft,
                  color: Colors.grey,)
            ),
    

    boxShape is not a parameter in NeumorphicStyle, is there any other way to import it.

    opened by Sammy-iiitb 7
  • Publish the 3.0.0

    Publish the 3.0.0

    • [x] Add neumorphicApp & NeumorphicToolbar
    • [x] Move BoxShape into style / theme
    • [x] Add NeumorphicText
    • [x] Add NeumorphicIcon
    • [x] Add tooltip (accessibility)
    • [x] Into readme explain depth/intensity/surfaceIntensity
    • [x] export some material widgets from neumorphic package (text, datepicker etc.)
    • [x] explain how text work in readme
    • [x] explain how icon / svg work in readme
    • [x] Add NeumorphicApp explanation on README
    • [x] Add NeumorphicFloatingButton
    • [x] Add Contributors
    • [x] update the changelog
    documentation enhancement widget Sample 
    opened by florent37 7
  • #201 - Null-Safety support

    #201 - Null-Safety support

    This PR aims to bring null-safety support to the package - as per #201 request.

    The approach taken was to change as little as possible in terms of logic:

    • Places where @required tag was used were replaced with required keyword and became non-nullable.
    • Parameters that are checked for nullability somewhere down the line were set as nullable.
    • If none of these two scenarios applied, used a default value.

    On slider.dart and range_slider.dart, the onPanUpdate method declarations have had to be updated, as context.findRenderObject() no longer yields a RenderBox (lib/src/widget/slider.dart:143, lib/src/widget/range_slider.dart:168). Instead, the tap position is now using DragUpdateDetails.localPosition.

    Secondly, I couldn't ascertain how to regenerate the lib/generated/i18n.dart file, but I don't see it being used anywhere. Maybe it should be dropped?

    @florent37 I hope this helps bringing the package to Null-Safety, let me know if you think I should change anything. Thanks in advance!

    opened by brenodt 6
  • Is this repo dead?

    Is this repo dead?

    @kcrebound @meltenc @cadicetienne @imp-dance @jaumard Is this project dead? Because I don't see very big activity here for last year and a lot of PR or Issues are not resolving..

    opened by mjablecnik 5
  • Add Support for FontFamily in NeumorphicThemeData

    Add Support for FontFamily in NeumorphicThemeData

    I wish to use the neumorphic theme and all other custom made designs. But, didn't get any inner implementation of "fontFamily" in neumorphicThemeData.

    opened by yashrajjain726 0
  • NeumorphicToggle doesn't support transparent foreground

    NeumorphicToggle doesn't support transparent foreground

    I'm using a NeumorphicToggle to control tabs. It looks great, however when I set color of the thumb's style to Colors.transparent, I get a pale blue foreground toggle element, not a transparent one. The background element works perfectly.

    image

    Setting the thumb style color to anything else works fine (e.g. Colors.red):

    image
    NeumorphicToggle(
      style: NeumorphicToggleStyle(
        backgroundColor: Colors.transparent,
      ),
      height: 50,
      selectedIndex: _tabController.index,
      displayForegroundOnlyIfSelected: true,
      children: [
        ToggleElement(
          background: const Center(
              child: Text(
            "Tab 1",
            style: TextStyle(fontWeight: FontWeight.w500),
          )),
          foreground: const Center(
              child: Text(
            "Tab 1",
            style: TextStyle(fontWeight: FontWeight.w700),
          )),
        ),
        ToggleElement(
          background: const Center(
              child: Text(
            "Tab 2",
            style: TextStyle(fontWeight: FontWeight.w500),
          )),
          foreground: const Center(
              child: Text(
            "Tab 2",
            style: TextStyle(fontWeight: FontWeight.w700),
          )),
        ),
      ],
      thumb: Neumorphic(
        style: NeumorphicStyle(
            boxShape: NeumorphicBoxShape.roundRect(
              BorderRadius.all(Radius.circular(12)),
            ),
            color: Colors.transparent),
      ),
      onChanged: (value) {
        setState(() {
          _tabController.animateTo(value);
        });
      },
    )
    

    platform is MacOs

    opened by robnorr 0
  • Make readme images load by link so they can be viewed on the pub.dev docs

    Make readme images load by link so they can be viewed on the pub.dev docs

    Images were broken on pub.dev: https://pub.dev/documentation/flutter_neumorphic/latest/ This is because the path to the image was specified and the medias folder is not available to pub.dev, loading by link allows pub.dev to also load the images.

    opened by Sami-ul 0
Releases(1.0.2)
  • 1.0.2(Mar 18, 2020)

    • 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)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Mar 8, 2020)

    • 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
    Source code(tar.gz)
    Source code(zip)
Flutter Phone E-Store App UI with support for dark and light mode

Flutter Phone E-Store App UI with support for dark and light mode

Jakub Sobaล„ski 2 Apr 30, 2022
The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.

The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.

null 3.4k Jan 3, 2023
Instagram UI designed with Flutter; it is compatible and responsive with any type of Android and iOS devices.

instagram Instagram clone UI designed with Flutter; it is compatible and responsive with any type of Android and iOS devices . Getting Started This pr

Mustafa Nabavi 4 Oct 28, 2021
flukit is a Flutter UI Kit

A Flutter UI Kit. ไธ€ไธชFlutter UI็ป„ไปถๅบ“ใ€‚

Flutterไธญๅ›ฝๅผ€ๆบ้กน็›ฎ 4.7k Jan 3, 2023
Flutter - E Commerce UI KIT ( completely free for everyone )

Flutter E-Commerce UI KIT A powerful Flutter E-Commerce starter template that bootstraps development of your mobile application. Flutter E-Commerce St

Muhammad Furqan 307 Dec 24, 2022
Flutter Movie UI Kit

flutter_movie_uikit A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Dicky Reynaldi 2 Sep 12, 2021
A Flutter UI kit with 50 plus screens for beginners to learn.

Flutter application built on top of contra wireframe kit. Thorough this project i will be developing all the screens in flutter and sharing in couple of series post.

Sabarinathan 566 Dec 29, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

null 1 Mar 8, 2022
The most complete flutter plugin packages for open various settings screen in Android and Ios

open_settings The most complete flutter plugin packages for open various settings screen in Android and Ios For Android: this plugin currently support

Ali Hoseinpoor 15 Dec 11, 2022
The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.

โš ๏ธ Dashchat v2 is available in v2 branch โš ๏ธ You can open issues for the v2 to indicate things we need to implement/fix. Also the API can change until

Fayeed Pawaskar 432 Dec 11, 2022
A complete Flutter E-Commerce Book Store application built using firebase as backend.

ecommerce A complete Flutter E-Commerce Book Store application built using firebase as backend. Features Add or remove item in cart Search products Ad

Fateh Singh 58 Sep 30, 2022
DashChat - The most complete Chat UI for flutter

DashChat - The most complete Chat UI for flutter. Easy to use, highly customizable and fully featured

Molteo 61 Dec 28, 2022
Complete project of simple xylophone

xylophone A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

MD. ARIF ANZUM 0 Nov 26, 2021
A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles with Flutter.

vector_tile_renderer A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles

David Green 30 Oct 7, 2022
A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

pin_code_text_field It's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP. Usage

Liew Jun Tung 309 Dec 28, 2022
A powerful & easy to use timeline package for Flutter! ๐Ÿš€

A powerful & easy to use timeline package for Flutter! ?? Caveat: This package is an early stage. Not enough testing has been done to guarantee stabil

Chulwoo Park 566 Dec 30, 2022
WooCommerce API - E-commerce Flutter v2.0 / USE block and architecture

Sonoff sonoffkz App - Woocommerce API Description ะœะพั ะฒั‚ะพั€ะฐั ะฒะตั€ัะธั ะผะฐะณะฐะทะธะฝะฐ ะฒ ะพั‚ะบั€ั‹ั‚ะพะผ ั€ะตะฟะพะทะธั‚ะพั€ะธะธ: ะฟั€ะธ ะธัะฟะพะปัŒะทะพะฒะฐะฝะธะธ ัั‚ะตะนั‚ ะผะตะฝะตะดะถะตะผะตะฝั‚ะฐ BLoC ะธ ัƒะดะพะฑะฝ

Maximus Edward An 1 May 10, 2022
This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Josiah Saunders 530 Dec 23, 2022
A plugin for `flutter_map` that enables the use of vector tiles.

vector_map_tiles A plugin for flutter_map that enables the use of vector tiles. Usage class _MyHomePageState extends State<MyHomePage> { // provide

David Green 78 Jan 7, 2023