Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Idean/Flutter-Neumorphic
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
https://github.com/Idean/Flutter-Neumorphic
android button card concave convex custom-shape dart depth design emboss flat flutter ios lightsource material neumorphic pub shape theme widgets
Last synced: about 2 months ago
JSON representation
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
- Host: GitHub
- URL: https://github.com/Idean/Flutter-Neumorphic
- Owner: Idean
- License: apache-2.0
- Created: 2020-02-19T14:49:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-18T09:35:40.000Z (4 months ago)
- Last Synced: 2024-06-18T12:30:30.856Z (3 months ago)
- Topics: android, button, card, concave, convex, custom-shape, dart, depth, design, emboss, flat, flutter, ios, lightsource, material, neumorphic, pub, shape, theme, widgets
- Language: Dart
- Homepage: https://pub.dev/packages/flutter_neumorphic
- Size: 16 MB
- Stars: 1,970
- Watchers: 28
- Forks: 357
- Open Issues: 78
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Flutter Neumorphic - 用于Flutter的现成Neumorphic套件，支持🕶️暗黑模式。 (组件 / UI)
- awesome-flutter-cn - Flutter Neumorphic - 使用 Neumorphic kit for Flutter 实现深色模式 (组件 / UI)
- awesome-flutter - Flutter Neumorphic - A complete, ready to use, Neumorphic ui kit for Flutter, dark mode compatible ` 📝 4 months ago ` (UI [🔝](#readme))
- awesome-flutter - Flutter Neumorphic - Ready to use Neumorphic kit for Flutter with 🕶️ dark mode. (Components / UI)
README
# flutter_neumorphic
A complete, ready to use, Neumorphic ui kit for Flutter
[](https://github.com/Idean/Flutter-Neumorphic)
Try Flutter-Neumorphic on your browser : 👉 https://flutter-neumorphic.firebaseapp.com/ 🌐
[](https://github.com/Idean/Flutter-Neumorphic)
# ⚙️ Installation
https://pub.dev/packages/flutter_neumorphic
[](
https://pub.dartlang.org/packages/flutter_neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
```dart
dependencies:
flutter_neumorphic: ^3.0.3
//requires flutter > 1.13.18
```
The in your .dart files
```dart
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
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
## 📦 Neumorphic
```dart
Neumorphic(
style: NeumorphicStyle(
shape: NeumorphicShape.concave,
boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
depth: 8,
lightSource: LightSource.topLeft,
color: Colors.grey
),
child: ...
)
```
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-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](#-shapes) | Concave / Convex / Flat | The shape of the curve used in the neumorphic container |
| [Depth](#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](#intensity) | 0 <= double <= 1 | The intensity of the Light, it influences on the shadow's color |
| [SurfaceIntensity](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](#-custom-shape) | Circle, RoundRect(radius), Stadium, Path | The box shape of a Neumorphic element. Stadium : roundrect with cirlces on each side |
| [Border](#-accessibility--border) | NeumorphicBorder | A border (color/width) to enhance contrast with background and others elements |
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-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
[](https://github.com/Idean/Flutter-Neumorphic)
**Text only handle positive depth**
```dart
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
[](https://github.com/Idean/Flutter-Neumorphic)
```dart
child: NeumorphicIcon(
Icons.add_circle,
size: 80,
),
```
How to display **SVG** icons ?
Simply use [https://fluttericon.com/](https://fluttericon.com/) to export your svg as .ttf & use NeumorphicIcon(YOUR_ICON)
[](https://fluttericon.com/)
## 🎨 Custom Shape
[](https://github.com/Idean/Flutter-Neumorphic)
Flutter Neumorphic supports custom shapes, just provide a path to
```dart
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`
```dart
Neumorphic(
style: NeumorphicStyle(
boxShape: NeumorphicBoxShape.path(MyShapePathProvider()),
),
...
),
```
You can import the Flutter logo as a custom shape using
```dart
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
[](https://github.com/Idean/Flutter-Neumorphic)
```dart
Neumorphic(
style: NeumorphicStyle(
border: NeumorphicBorder(
color: Color(0x33000000),
width: 0.8,
)
),
...
)
```
You can enable/disable it (eg: listening an Accessibility Provider) with `isEnabled`
```dart
border: NeumorphicBorder(
isEnabled: true,
color: Color(0x33000000),
width: 0.8,
)
```
Note that `borderColor` and `borderWidth` default values has been added to `NeumorphicThemeData`
## 🎨 Neumorphic Theme
[](https://github.com/Idean/Flutter-Neumorphic)
[](https://github.com/Idean/Flutter-Neumorphic)
```dart
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 :
```dart
final theme = NeumorphicTheme.currentTheme(context);
final baseColor = theme.baseColor;
final accentColor = theme.accentColor;
...
```
Toggle from light to dark
```dart
NeumorphicTheme.of(context).themeMode = ThemeMode.dark;
```
Know if using dark
```dart
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 )
```dart
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
[]()
## 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”.
[](https://github.com/Idean/Flutter-Neumorphic)
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 |
|:------------------------------------------------------------------------------:|--------------|
| [](https://github.com/florent37) | [Florent Champigny](https://github.com/florent37) |
| [](https://github.com/Debilobob) | [Olivier Bonvila](https://github.com/Debilobob) |
| [](https://github.com/almighty972) | [Gyl Jean Lambert](https://github.com/almighty972) |
| [](https://github.com/jaumard) | [Jimmy Aumard](https://github.com/jaumard) |
| [](https://github.com/Overman775) | [Overman775](https://github.com/Overman775) |
| [](https://github.com/schopy) | [schopy](https://github.com/schopy) |
## 📄 License
Flutter-Neumorphic is released under the Apache2 license.
See [LICENSE](./LICENSE) for details.
If you use the open-source library in your project, please make sure to credit and backlink to www.idean.com
[](https://www.idean.com)