[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9241":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":16,"starSnapshotCount":16,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},9241,"Flutter-Neumorphic","Idean\u002FFlutter-Neumorphic","Idean","A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_neumorphic",null,"Dart",2189,417,25,74,0,1,4,29.86,"Apache License 2.0",false,"master",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"android","button","card","concave","convex","custom-shape","dart","depth","design","emboss","flat","flutter","ios","lightsource","material","neumorphic","pub","shape","theme","widgets","2026-06-12 02:02:04","# flutter_neumorphic\n\nA complete, ready to use, Neumorphic ui kit for Flutter\n\n[![flutter_logo](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fflutter_logo_small.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\nTry Flutter-Neumorphic on your browser : 👉 https:\u002F\u002Fflutter-neumorphic.firebaseapp.com\u002F 🌐\n\n[![neumorphic_playground](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fplayground.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n# ⚙️ Installation\n\nhttps:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_neumorphic\n\n[![pub package](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fflutter_neumorphic.svg)](\nhttps:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fflutter_neumorphic)\n[![pub package](https:\u002F\u002Fapi.codemagic.io\u002Fapps\u002F5e6113f78b547c3c80edbdb3\u002F5e6113f78b547c3c80edbdb2\u002Fstatus_badge.svg)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n\n```dart\ndependencies:\n  flutter_neumorphic: ^3.0.3\n\n\u002F\u002Frequires flutter > 1.13.18\n```\n\nThe in your .dart files \n```dart\nimport 'package:flutter_neumorphic\u002Fflutter_neumorphic.dart';\n```\n\n# 🗂 Widgets\n\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Preview\u003C\u002Fth>\n\u003Cth>Widget\u003C\u002Fth>\n\u003Cth>Description\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fcontainer.gif\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>Neumorphic\u003C\u002Ftd>\n  \u003Ctd>The main Neumorphic Widget, a container which adds white\u002Fdark gradient depending on a lightsource and a depth \u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fbutton.gif\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicButton\u003C\u002Ftd>\n  \u003Ctd>A neumorphic button that plays with the depth to respond to user interraction\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fradio.gif\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicRadio\u003C\u002Ftd>\n  \u003Ctd>A set of neumorphic button whith only one selected at time, depending on a value and groupValue\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fcheckbox.gif\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicCheckbox\u003C\u002Ftd>\n  \u003Ctd> A button associated with a value, can be checked\u002Funckecked, if checked, takes the accent color\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Ftext.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicText\u003C\u002Ftd>\n  \u003Ctd>A Neumorphic text (only work with positive depth)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Ficon.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicIcon\u003C\u002Ftd>\n  \u003Ctd>A Neumorphic icon (only work with positive depth)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Ftextfield.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>material.TextField\u003C\u002Ftd>\n  \u003Ctd>For TextFields, just surround your existing material textfield widget with a Neumorphic (container)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fswitch.gif\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>NeumorphicSwitch\u003C\u002Ftd>\n  \u003Ctd>An On\u002FOff toggle, associated with a value, if toggled, takes the accent color \u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Ftoggle.gif\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>NeumorphicToggle\u003C\u002Ftd>\n  \u003Ctd>An mutiple value toggle, associated with a selecteedIndex\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fslider.gif\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicSlider\u003C\u002Ftd>\n  \u003Ctd>A Neumorphic seekbar (range slider), the user can select a value in a range\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fprogress.gif\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>NeumorphicProgress\u003C\u002Ftd>\n  \u003Ctd>A determinate progress, takes the displayed percentage\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\"src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Findeterminate.gif\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>NeumorphicProgressIndeterminate\u003C\u002Ftd>\n  \u003Ctd>An inderminate progress-bar\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fbackground.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>NeumorphicBackground\u003C\u002Ftd>\n  \u003Ctd>Take the background color of the theme, can clip the screen with a borderRadius\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg width=\"300px\" src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fbackground.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>NeumorphicApp\u003C\u002Ftd>\n  \u003Ctd>An application that uses Neumorphic design. Handle theme, navigation, localisation, and much more\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fwidgets\u002Fapp_bar.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>NeumorphicAppBar\u003C\u002Ftd>\n  \u003Ctd>A Neumorphhic design app bar. Can be used inside Scaffold\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n## 👀 Showcases\n\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fsamples\u002Fsample_form.png)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fsamples\u002Fsample_clock.png)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fsamples\u002Fsample_galaxy.png)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fsamples\u002Fsample_widgets.png)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n## 📦 Neumorphic\n\n```dart\n\nNeumorphic(\n  style: NeumorphicStyle(\n    shape: NeumorphicShape.concave,\n    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)), \n    depth: 8,\n    lightSource: LightSource.topLeft,\n    color: Colors.grey\n  ),\n  child: ...\n)\n```\n\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fneumorphic_container.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fneumorphic_circle_container.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n☝️ Playing with LightSource & Depth\n\n\n### 🛠️ Attributes\n\n| Attributes | Values | Description |\n|------------|--------|-------------|\n| LightSource | TopLeft, BottomRight, etc. \u002F (dx, dy) | The source of light specifit to the theme or the widget, used to project white\u002Fdark shadows on neumorphic elements |\n| [Shape](#-shapes) | Concave \u002F Convex \u002F Flat | The shape of the curve used in the neumorphic container |\n| [Depth](#depth) | -20 \u003C= double \u003C= 20 | The distance of the widget to his parent. Can be negative => emboss. It influences on the shadow's color and its size\u002Fblur |\n| [Intensity](#intensity) | 0 \u003C= double \u003C= 1 | The intensity of the Light, it influences on the shadow's color |\n| [SurfaceIntensity](surfaceintensity) | 0 \u003C= double \u003C= 1 | The intensity of the Surface, it influences on the concave\u002Fconvex darkness |\n| Color | any Color | The default color of  Neumorphic elements | \n| Accent | any Color | The default accent color of the Neumorphic element when activated (eg: checkbox) | \n| Variant | any Color | The default secondary color of the Neumorphic element (eg: used as second color on the progress gradient) | \n| [BoxShape](#-custom-shape) | Circle, RoundRect(radius), Stadium, Path | The box shape of a Neumorphic element. Stadium : roundrect with cirlces on each side | \n| [Border](#-accessibility--border) | NeumorphicBorder | A border (color\u002Fwidth) to enhance contrast with background and others elements | \n\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fdoc\u002Fdepth.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fdoc\u002Fintensity.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fdoc\u002Fsurface_intensity.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fdoc\u002Flightsource.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n\n### 🔧 Shapes\n\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Shape\u003C\u002Fth>\n\u003Cth>Widget\u003C\u002Fth>\n\u003Cth>Image\u003C\u002Fth>\n\u003Cth>Condition\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\n\u003Ctr>\n  \u003Ctd>Flat\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fwidget_flat.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fflat.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>depth >= 0 && shape == Flat\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n\u003Ctr>\n  \u003Ctd>Convex\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fwidget_convex.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fconvex.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>depth >= 0 && shape == Convex\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n\n\u003Ctr>\n  \u003Ctd>Concave\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fwidget_concave.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fconcave.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>depth >= 0 && shape == Concave\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\n\u003Ctr>\n  \u003Ctd>Emboss\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Fwidget_emboss.png\"\u002F>\u003C\u002Ftd>\n  \u003Ctd>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fraw\u002Fmaster\u002Fmedias\u002Fshapes\u002Femboss.png\"\u002F> \u003C\u002Ftd>\n  \u003Ctd>depth \u003C 0\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n## Neumorphic Text\n\n[![text](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fwidgets\u002Ftext.png)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n**Text only handle positive depth**\n\n```dart\nchild: NeumorphicText(\n        \"I love flutter\",\n        style: NeumorphicStyle(\n          depth: 4,  \u002F\u002Fcustomize depth here\n          color: Colors.white, \u002F\u002Fcustomize color here\n        ),\n        textStyle: NeumorphicTextStyle(\n          fontSize: 18, \u002F\u002Fcustomize size here\n          \u002F\u002F AND others usual text style properties (fontFamily, fontWeight, ...)\n        ),\n    ),\n```\n\n\n## Neumorphic Icon\n\n[![custom_shape](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fneumorphic_icon.png)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n```dart\nchild: NeumorphicIcon(\n        Icons.add_circle,\n        size: 80,\n    ),\n```\n\nHow to display **SVG** icons ?\n\nSimply use [https:\u002F\u002Ffluttericon.com\u002F](https:\u002F\u002Ffluttericon.com\u002F) to export your svg as .ttf & use NeumorphicIcon(YOUR_ICON) \n\n[![custom_shape](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fflutter_svg.png)](https:\u002F\u002Ffluttericon.com\u002F)\n\n## 🎨 Custom Shape\n\n[![custom_shape](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcustom_shape.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\nFlutter Neumorphic supports custom shapes, just provide a path to \n\n```dart\nclass MyShapePathProvider extends NeumorphicPathProvider {\n  @override\n  bool shouldReclip(NeumorphicPathProvider oldClipper) {\n    return true;\n  }\n\n  @override\n  Path getPath(Size size) {\n    return Path()\n      ..moveTo(0, 0)\n      ..lineTo(size.width\u002F2, 0)\n      ..lineTo(size.width, size.height\u002F2)\n      ..lineTo(size.width\u002F2, size.height\u002F2)\n      ..lineTo(size.width, size.height)\n      ..lineTo(0, size.height)\n      ..close();\n  }\n}\n```\n\nAnd use `NeumorphicBoxShape.path`\n\n```dart\nNeumorphic(\n  style: NeumorphicStyle(\n     boxShape: NeumorphicBoxShape.path(MyShapePathProvider()),\n  ),\n  ...\n),\n```\n\nYou can import the Flutter logo as a custom shape using \n\n```dart\nNeumorphic(\n  style: NeumorphicStyle(\n    shape: NeumorphicBoxShape.path(NeumorphicFlutterLogoPathProvider()),\n  ),\n  ...\n),\n```\n\n## 🔲 Accessibility \u002F Border\n\nFor design purposes, or simply to enhance accessibility, \nyou can add a border on Neumorphic widgets \n\n[![Neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fborder.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n```dart\nNeumorphic(\n      style: NeumorphicStyle(\n        border: NeumorphicBorder(\n          color: Color(0x33000000),\n          width: 0.8,\n        )\n      ),\n      ...\n)\n```\n\nYou can enable\u002Fdisable it (eg: listening an Accessibility Provider) with `isEnabled`\n\n```dart\nborder: NeumorphicBorder(\n    isEnabled: true,\n    color: Color(0x33000000),\n    width: 0.8,\n)\n```\n\nNote that `borderColor` and `borderWidth` default values has been added to `NeumorphicThemeData`\n\n## 🎨 Neumorphic Theme\n\n\n[![neumorphic_theme](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002FtoggleDark.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n[![neumorphic_theme](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002FtoggleTheme.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\n```dart\nNeumorphicTheme(\n    themeMode: ThemeMode.light, \u002F\u002For dark \u002F system\n    darkTheme: NeumorphicThemeData(\n        baseColor: Color(0xff333333),\n        accentColor: Colors.green,\n        lightSource: LightSource.topLeft,\n        depth: 4,\n        intensity: 0.3,\n    ),\n    theme: NeumorphicThemeData(\n        baseColor: Color(0xffDDDDDD),\n        accentColor: Colors.cyan,\n        lightSource: LightSource.topLeft,\n        depth: 6,\n        intensity: 0.5,\n    ),\n    child: ...\n)\n```\n\nTo retrieve the current used theme :\n\n```dart\nfinal theme = NeumorphicTheme.currentTheme(context);\nfinal baseColor = theme.baseColor;\nfinal accentColor = theme.accentColor;\n...\n```\n\nToggle from light to dark\n```dart\nNeumorphicTheme.of(context).themeMode = ThemeMode.dark;\n```\n\nKnow if using dark\n```dart\nif(NeumorphicTheme.of(context).isUsingDark){\n  \n}\n```\n\n# NeumorphicApp\n\nYou can use direcly in your project a `NeumorphicApp`, surrounding your code\n\nIt handle directly NeumorphicTheme & Navigation (and all possibilities of MaterialApp )\n\n```dart\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  \u002F\u002F This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return NeumorphicApp(\n      debugShowCheckedModeBanner: false,\n      title: 'Neumorphic App',\n      themeMode: ThemeMode.light,\n      theme: NeumorphicThemeData(\n        baseColor: Color(0xFFFFFFFF),\n        lightSource: LightSource.topLeft,\n        depth: 10,\n      ),\n      darkTheme: NeumorphicThemeData(\n        baseColor: Color(0xFF3E3E3E),\n        lightSource: LightSource.topLeft,\n        depth: 6,\n      ),\n      home: MyHomePage(),\n    );\n  }\n}\n```\n\n# What's neumorphic\n\n[![neumorphic](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fneumorphic.jpg)]()\n\n## Material Cards\n\nA Modern \u002F 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.\n\n## Neumorphic cards\n\nNeumorphic 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”.\n\n[![neumorphic_button](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fbutton_press.gif)](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic)\n\nHere'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.\n\n\n# 👥 Contributors\n\n\n|                                                                                | Contributors |\n|:------------------------------------------------------------------------------:|--------------|\n| [![florent](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcontributors\u002Fflorent.jpeg)](https:\u002F\u002Fgithub.com\u002Fflorent37) | [Florent Champigny](https:\u002F\u002Fgithub.com\u002Fflorent37) |\n| [![olivier](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcontributors\u002Folivier.png)](https:\u002F\u002Fgithub.com\u002FDebilobob)  | [Olivier Bonvila](https:\u002F\u002Fgithub.com\u002FDebilobob)  |\n| [![gyl](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcontributors\u002Fgyl.png)](https:\u002F\u002Fgithub.com\u002Falmighty972)        | [Gyl Jean Lambert](https:\u002F\u002Fgithub.com\u002Falmighty972)  |\n| [![jaumard](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcontributors\u002Fjaumard.jpeg)](https:\u002F\u002Fgithub.com\u002Fjaumard)    | [Jimmy Aumard](https:\u002F\u002Fgithub.com\u002Fjaumard)  |\n| [![Overman775](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcontributors\u002Foverman775.jpeg)](https:\u002F\u002Fgithub.com\u002FOverman775)    | [Overman775](https:\u002F\u002Fgithub.com\u002FOverman775)  |\n| [![schopy](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fcontributors\u002Fschopy.jpeg)](https:\u002F\u002Fgithub.com\u002Fschopy)    | [schopy](https:\u002F\u002Fgithub.com\u002Fschopy)  |\n\n\n## 📄 License\n\n\nFlutter-Neumorphic is released under the Apache2 license.\nSee [LICENSE](.\u002FLICENSE) for details.\n\nIf you use the open-source library in your project, please make sure to credit and backlink to www.idean.com\n\n[![bottom_banner](https:\u002F\u002Fgithub.com\u002FIdean\u002FFlutter-Neumorphic\u002Fblob\u002Fmaster\u002Fmedias\u002Fbottom_banner.png)](https:\u002F\u002Fwww.idean.com)\n","Flutter-Neumorphic 是一个为 Flutter 设计的完整且即用型的新拟态 UI 组件库，支持暗黑模式。该项目提供了多种新拟态风格的控件，包括按钮、卡片、单选框、复选框等，通过模拟光线和深度效果来创建具有立体感的界面元素。其核心功能在于能够根据光源位置动态调整阴影和高光，从而实现逼真的凹凸效果，并且易于与现有 Material Design 组件集成。适用于追求现代美观设计的应用开发场景，特别是在需要提供独特视觉体验或希望增强用户交互反馈的情况下。",2,"2026-06-11 03:21:50","top_language"]