Zen Neumorphic

A high-performance, premium Neumorphic (Soft UI) widget library for Flutter. Inspired by the "Deep Focus" design system, it provides a tactile, "Soft Iron" aesthetic that feels both modern and professional.

pub package License: MIT

Features

  • 🎨 Beautiful Neumorphic Design: Out-of-the-box support for Convex, Concave, and Flat styles.
  • 🌓 Dynamic Theme Support: Intelligent color switching between Light and Dark (Soft Iron) modes.
  • 🧱 Rich Component Library: Includes Container, TextField, Switch, Checkbox, and Groups.
  • ⚡ High Performance: Optimized using standard Flutter BoxShadow and Container for smooth performance.
  • 🛠️ Highly Customizable: Fine-tune depth, border radius, colors, and shadows.
  • 🖱️ Interactive Widgets: Includes ZenNeumorphicButton with smooth press animations.

Getting Started

Add the dependency to your pubspec.yaml:

dependencies:
  zen_widget: ^0.0.1

Usage

1. Basic Neumorphic Container

import 'package:zen_widget/zen_widget.dart';

ZenNeumorphic(
  style: ZenNeumorphicStyle.convex,
  borderRadius: 24,
  child: Center(child: Text('Soft UI')),
)

2. Interactive Button

ZenNeumorphicButton(
  onPressed: () => print('Tapped!'),
  child: Icon(Icons.favorite),
)

3. Theme Customization

The library automatically detects Theme.of(context).brightness. However, you can override the global Neumorphic style using ZenNeumorphicTheme:

ZenNeumorphicTheme(
  data: ZenNeumorphicData(
    backgroundColor: Color(0xFFE0E5EC),
    lightShadowColor: Colors.white,
    darkShadowColor: Color(0xFFA3B1C6),
    depth: 10,
  ),
  child: MyApp(),
)

Available Widgets

Widget Description
ZenNeumorphicContainer Base container for neumorphic effects.
ZenNeumorphicButton Interactive button with press animation.
ZenNeumorphicTextField Styled input field with sunken effect.
ZenNeumorphicSwitch Smooth toggle switch.
ZenNeumorphicCheckbox Tactile checkbox.
ZenNeumorphicSlider Smooth neumorphic slider with progress tracking.
ZenNeumorphicProgressBar Animated progress bar for status tracking.
ZenNeumorphicNavbar Premium neumorphic bottom navigation bar.
ZenNeumorphicGroup Grouping container for related settings or forms.

Styles

Style Description
convex Raised effect, perfect for cards and unpressed buttons.
concave Sunken effect, ideal for pressed states or input fields.
flat Level with the surface, used for subtle transitions.

Credits

Inspired by the "Deep Focus" productivity suite design language.

License

MIT License - see the LICENSE file for details.

Libraries

zen_widget