{"id":15032797,"url":"https://github.com/idean/flutter-neumorphic","last_synced_at":"2025-05-14T16:02:25.547Z","repository":{"id":37386389,"uuid":"241647354","full_name":"Idean/Flutter-Neumorphic","owner":"Idean","description":"A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible","archived":false,"fork":false,"pushed_at":"2024-05-18T09:35:40.000Z","size":16818,"stargazers_count":2086,"open_issues_count":82,"forks_count":394,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-11T15:56:57.441Z","etag":null,"topics":["android","button","card","concave","convex","custom-shape","dart","depth","design","emboss","flat","flutter","ios","lightsource","material","neumorphic","pub","shape","theme","widgets"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_neumorphic","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Idean.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"FlorentChampigny","github":"florent37"}},"created_at":"2020-02-19T14:49:02.000Z","updated_at":"2025-04-11T09:59:23.000Z","dependencies_parsed_at":"2024-06-18T12:29:23.440Z","dependency_job_id":null,"html_url":"https://github.com/Idean/Flutter-Neumorphic","commit_stats":{"total_commits":510,"total_committers":22,"mean_commits":"23.181818181818183","dds":"0.20588235294117652","last_synced_commit":"57f2b1f54f52fb9cb8bfa22eca812ebb69af086d"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idean%2FFlutter-Neumorphic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idean%2FFlutter-Neumorphic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idean%2FFlutter-Neumorphic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idean%2FFlutter-Neumorphic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Idean","download_url":"https://codeload.github.com/Idean/Flutter-Neumorphic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254179903,"owners_count":22027884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","button","card","concave","convex","custom-shape","dart","depth","design","emboss","flat","flutter","ios","lightsource","material","neumorphic","pub","shape","theme","widgets"],"created_at":"2024-09-24T20:19:27.877Z","updated_at":"2025-05-14T16:02:20.528Z","avatar_url":"https://github.com/Idean.png","language":"Dart","readme":"# flutter_neumorphic\n\nA complete, ready to use, Neumorphic ui kit for Flutter\n\n[![flutter_logo](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/flutter_logo_small.gif)](https://github.com/Idean/Flutter-Neumorphic)\n\nTry Flutter-Neumorphic on your browser : 👉 https://flutter-neumorphic.firebaseapp.com/ 🌐\n\n[![neumorphic_playground](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/playground.gif)](https://github.com/Idean/Flutter-Neumorphic)\n\n# ⚙️ Installation\n\nhttps://pub.dev/packages/flutter_neumorphic\n\n[![pub package](https://img.shields.io/pub/v/flutter_neumorphic.svg)](\nhttps://pub.dartlang.org/packages/flutter_neumorphic)\n[![pub package](https://api.codemagic.io/apps/5e6113f78b547c3c80edbdb3/5e6113f78b547c3c80edbdb2/status_badge.svg)](https://github.com/Idean/Flutter-Neumorphic)\n\n\n```dart\ndependencies:\n  flutter_neumorphic: ^3.0.3\n\n//requires flutter \u003e 1.13.18\n```\n\nThe in your .dart files \n```dart\nimport 'package:flutter_neumorphic/flutter_neumorphic.dart';\n```\n\n# 🗂 Widgets\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003ePreview\u003c/th\u003e\n\u003cth\u003eWidget\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/container.gif\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphic\u003c/td\u003e\n  \u003ctd\u003eThe main Neumorphic Widget, a container which adds white/dark gradient depending on a lightsource and a depth \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/button.gif\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicButton\u003c/td\u003e\n  \u003ctd\u003eA neumorphic button that plays with the depth to respond to user interraction\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/radio.gif\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicRadio\u003c/td\u003e\n  \u003ctd\u003eA set of neumorphic button whith only one selected at time, depending on a value and groupValue\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/checkbox.gif\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicCheckbox\u003c/td\u003e\n  \u003ctd\u003e A button associated with a value, can be checked/unckecked, if checked, takes the accent color\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/text.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicText\u003c/td\u003e\n  \u003ctd\u003eA Neumorphic text (only work with positive depth)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/icon.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicIcon\u003c/td\u003e\n  \u003ctd\u003eA Neumorphic icon (only work with positive depth)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/textfield.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003ematerial.TextField\u003c/td\u003e\n  \u003ctd\u003eFor TextFields, just surround your existing material textfield widget with a Neumorphic (container)\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/switch.gif\"/\u003e \u003c/td\u003e\n  \u003ctd\u003eNeumorphicSwitch\u003c/td\u003e\n  \u003ctd\u003eAn On/Off toggle, associated with a value, if toggled, takes the accent color \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/toggle.gif\"/\u003e \u003c/td\u003e\n  \u003ctd\u003eNeumorphicToggle\u003c/td\u003e\n  \u003ctd\u003eAn mutiple value toggle, associated with a selecteedIndex\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/slider.gif\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicSlider\u003c/td\u003e\n  \u003ctd\u003eA Neumorphic seekbar (range slider), the user can select a value in a range\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/progress.gif\"/\u003e\u003c/td\u003e\n  \u003ctd\u003eNeumorphicProgress\u003c/td\u003e\n  \u003ctd\u003eA determinate progress, takes the displayed percentage\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\"src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/indeterminate.gif\"/\u003e \u003c/td\u003e\n  \u003ctd\u003eNeumorphicProgressIndeterminate\u003c/td\u003e\n  \u003ctd\u003eAn inderminate progress-bar\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/background.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003eNeumorphicBackground\u003c/td\u003e\n  \u003ctd\u003eTake the background color of the theme, can clip the screen with a borderRadius\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg width=\"300px\" src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/background.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003eNeumorphicApp\u003c/td\u003e\n  \u003ctd\u003eAn application that uses Neumorphic design. Handle theme, navigation, localisation, and much more\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/widgets/app_bar.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003eNeumorphicAppBar\u003c/td\u003e\n  \u003ctd\u003eA Neumorphhic design app bar. Can be used inside Scaffold\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## 👀 Showcases\n\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/samples/sample_form.png)](https://github.com/Idean/Flutter-Neumorphic)\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/samples/sample_clock.png)](https://github.com/Idean/Flutter-Neumorphic)\n\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/samples/sample_galaxy.png)](https://github.com/Idean/Flutter-Neumorphic)\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/samples/sample_widgets.png)](https://github.com/Idean/Flutter-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://github.com/Idean/Flutter-Neumorphic/blob/master/medias/neumorphic_container.gif)](https://github.com/Idean/Flutter-Neumorphic)\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/neumorphic_circle_container.gif)](https://github.com/Idean/Flutter-Neumorphic)\n\n☝️ Playing with LightSource \u0026 Depth\n\n\n### 🛠️ Attributes\n\n| Attributes | Values | Description |\n|------------|--------|-------------|\n| 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 |\n| [Shape](#-shapes) | Concave / Convex / 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 =\u003e emboss. It influences on the shadow's color and its size/blur |\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/convex 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/width) to enhance contrast with background and others elements | \n\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/doc/depth.gif)](https://github.com/Idean/Flutter-Neumorphic)\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/doc/intensity.gif)](https://github.com/Idean/Flutter-Neumorphic)\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/doc/surface_intensity.gif)](https://github.com/Idean/Flutter-Neumorphic)\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/doc/lightsource.gif)](https://github.com/Idean/Flutter-Neumorphic)\n\n\n### 🔧 Shapes\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eShape\u003c/th\u003e\n\u003cth\u003eWidget\u003c/th\u003e\n\u003cth\u003eImage\u003c/th\u003e\n\u003cth\u003eCondition\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\n\u003ctr\u003e\n  \u003ctd\u003eFlat\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_flat.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/flat.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003edepth \u003e= 0 \u0026\u0026 shape == Flat\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n  \u003ctd\u003eConvex\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_convex.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/convex.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003edepth \u003e= 0 \u0026\u0026 shape == Convex\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\u003ctr\u003e\n  \u003ctd\u003eConcave\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_concave.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/concave.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003edepth \u003e= 0 \u0026\u0026 shape == Concave\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n  \u003ctd\u003eEmboss\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/widget_emboss.png\"/\u003e\u003c/td\u003e\n  \u003ctd\u003e\u003cimg src=\"https://github.com/Idean/Flutter-Neumorphic/raw/master/medias/shapes/emboss.png\"/\u003e \u003c/td\u003e\n  \u003ctd\u003edepth \u003c 0\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Neumorphic Text\n\n[![text](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/widgets/text.png)](https://github.com/Idean/Flutter-Neumorphic)\n\n**Text only handle positive depth**\n\n```dart\nchild: NeumorphicText(\n        \"I love flutter\",\n        style: NeumorphicStyle(\n          depth: 4,  //customize depth here\n          color: Colors.white, //customize color here\n        ),\n        textStyle: NeumorphicTextStyle(\n          fontSize: 18, //customize size here\n          // AND others usual text style properties (fontFamily, fontWeight, ...)\n        ),\n    ),\n```\n\n\n## Neumorphic Icon\n\n[![custom_shape](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/neumorphic_icon.png)](https://github.com/Idean/Flutter-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://fluttericon.com/](https://fluttericon.com/) to export your svg as .ttf \u0026 use NeumorphicIcon(YOUR_ICON) \n\n[![custom_shape](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/flutter_svg.png)](https://fluttericon.com/)\n\n## 🎨 Custom Shape\n\n[![custom_shape](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/custom_shape.gif)](https://github.com/Idean/Flutter-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/2, 0)\n      ..lineTo(size.width, size.height/2)\n      ..lineTo(size.width/2, size.height/2)\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 / Border\n\nFor design purposes, or simply to enhance accessibility, \nyou can add a border on Neumorphic widgets \n\n[![Neumorphic](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/border.gif)](https://github.com/Idean/Flutter-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/disable 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://github.com/Idean/Flutter-Neumorphic/blob/master/medias/toggleDark.gif)](https://github.com/Idean/Flutter-Neumorphic)\n[![neumorphic_theme](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/toggleTheme.gif)](https://github.com/Idean/Flutter-Neumorphic)\n\n```dart\nNeumorphicTheme(\n    themeMode: ThemeMode.light, //or dark / 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 \u0026 Navigation (and all possibilities of MaterialApp )\n\n```dart\nvoid main() =\u003e runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  // 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://github.com/Idean/Flutter-Neumorphic/blob/master/medias/neumorphic.jpg)]()\n\n## Material Cards\n\nA 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.\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://github.com/Idean/Flutter-Neumorphic/blob/master/medias/button_press.gif)](https://github.com/Idean/Flutter-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://github.com/Idean/Flutter-Neumorphic/blob/master/medias/contributors/florent.jpeg)](https://github.com/florent37) | [Florent Champigny](https://github.com/florent37) |\n| [![olivier](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/contributors/olivier.png)](https://github.com/Debilobob)  | [Olivier Bonvila](https://github.com/Debilobob)  |\n| [![gyl](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/contributors/gyl.png)](https://github.com/almighty972)        | [Gyl Jean Lambert](https://github.com/almighty972)  |\n| [![jaumard](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/contributors/jaumard.jpeg)](https://github.com/jaumard)    | [Jimmy Aumard](https://github.com/jaumard)  |\n| [![Overman775](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/contributors/overman775.jpeg)](https://github.com/Overman775)    | [Overman775](https://github.com/Overman775)  |\n| [![schopy](https://github.com/Idean/Flutter-Neumorphic/blob/master/medias/contributors/schopy.jpeg)](https://github.com/schopy)    | [schopy](https://github.com/schopy)  |\n\n\n## 📄 License\n\n\nFlutter-Neumorphic is released under the Apache2 license.\nSee [LICENSE](./LICENSE) 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://github.com/Idean/Flutter-Neumorphic/blob/master/medias/bottom_banner.png)](https://www.idean.com)\n","funding_links":["https://ko-fi.com/FlorentChampigny","https://github.com/sponsors/florent37"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidean%2Fflutter-neumorphic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidean%2Fflutter-neumorphic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidean%2Fflutter-neumorphic/lists"}