Flutter Neumorphic Studio #

A comprehensive neumorphic design system for Flutter with 60 ready-to-use components, real-time theme customization, and an interactive workbench for rapid UI prototyping. My name is Antoine Dubuc, I'm a technical product manager who is spending some weekends on a startup project and this was created to facilitate the UI development of the app I'm working on.

https://www.askantoine.ca (my website!)

https://www.ai-entourage.ca (my little weekend project this was birthed for)

I'd like to dedicate this to Mitch Koko, arguably the God of Neumorphism for Flutter. https://mitchkoko.app Mitch, I'm a big fan of your work! 🙏

Features #

• 60 Neumorphic Components - Buttons, cards, sliders, inputs, indicators, and more
• Real-Time Theme Customization - Interactive workbench for live design iteration
• Light & Dark Mode - Full support for both themes with automatic shadow adjustment
• Accessibility-Focused - High contrast ratios and large touch targets for elderly users
• Component State System - Rest, hover, pressed, and disabled states for all interactive components
• Palette Generator - Generate complete color palettes from a single seed color

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_neumorphic_studio: ^0.1.0

Then run:

flutter pub get

Quick Start #

import 'package:flutter_neumorphic_studio/flutter_neumorphic_studio.dart';

// Use a neumorphic button
NeumorphicButton(
  text: 'Press Me',
  baseColor: Color(0xFFe0e5ec),
  textColor: Color(0xFF6b7280),
  iconColor: Color(0xFF6b7280),
  hoverBaseColor: Color(0xFFd1d5db),
  hoverTextColor: Color(0xFF4b5563),
  hoverIconColor: Color(0xFF4b5563),
  pressedBaseColor: Color(0xFFc5cdd6),
  pressedTextColor: Color(0xFF374151),
  pressedIconColor: Color(0xFF374151),
  onPressed: () => print('Pressed!'),
)

Component Categories #

Buttons #

• NeumorphicButton - Standard button with text and optional icon
• NeumorphicIconButton - Icon-only button
• NeumorphicEmergencySosButton - Emergency SOS with haptic feedback
• NeumorphicVoiceRecordingButton - Voice recording with pulse animation

Cards (15 variants) #

• NeumorphicCard - Base card component
• NeumorphicStatusCard - Status display with icons
• NeumorphicContactCard - Contact information display
• NeumorphicMedicationCard - Medication reminders
• NeumorphicWeatherCard - Weather display
• NeumorphicBalanceDisplayCard - Financial balance
• NeumorphicBillPaymentCard - Bill payment interface
• NeumorphicEventCardRsvp - Event RSVP card
• NeumorphicExerciseEnergyBadge - Exercise tracking
• NeumorphicNewsContentCard - News articles
• NeumorphicPlantPetCareCard - Plant/pet care reminders
• NeumorphicQuickActionTile - Quick action tiles
• NeumorphicScamAlertCard - Scam/fraud alerts
• NeumorphicSupplyChecklistCard - Supply checklists
• NeumorphicTimelineFeedCard - Timeline feed items

Controls #

• NeumorphicSlider - Standard slider control
• NeumorphicToggle - Binary ON/OFF toggle
• NeumorphicMoodSlider - Mood rating (1-5 scale)
• NeumorphicPainRatingSlider - Pain rating (0-10 scale)

Inputs #

• NeumorphicTextField - Text input field
• NeumorphicSearchBar - Search input with icon
• NeumorphicCheckbox - Checkbox control
• NeumorphicRadio - Radio button control
• NeumorphicMultiSelectChipGroup - Multi-select chips

Indicators #

• NeumorphicProgressBar - Progress indicator
• NeumorphicBadge - Status badge
• NeumorphicStepper - Step indicator
• NeumorphicLoadingSpinner - Loading animation
• NeumorphicHydrationRingIndicator - Circular progress for hydration

Lists #

• NeumorphicListItem - List item with neumorphic styling
• NeumorphicListView - Scrollable list view
• NeumorphicPrayerTaskList - Prayer/task checklist

Media #

• NeumorphicVideoPlayerExercise - Video player for exercises
• NeumorphicCameraCaptureView - Camera capture interface
• NeumorphicPhotoCarousel - Photo carousel/gallery
• NeumorphicPlaylistMediaCard - Music playlist card
• NeumorphicVideoCallInterface - Video call UI

Displays #

• NeumorphicScheduleTimeline - Daily schedule timeline
• NeumorphicLiveTranscriptionDisplay - Live transcription
• NeumorphicSunriseWakeDisplay - Sunrise alarm display

Grids #

• NeumorphicVitalsDisplayGrid - Health vitals grid
• NeumorphicApplianceStatusGrid - Smart home appliances
• NeumorphicGroupCallTileGrid - Group call participants

Navigation #

• NeumorphicMapNavigationView - Map navigation interface

Panels #

• NeumorphicExpansionPanel - Expandable panel
• NeumorphicSoundTimerPanel - Sound/timer controls

Selectors #

• NeumorphicFolderGridSelector - Folder/file selector grid
• NeumorphicTransportationSelector - Transportation mode selector

Viewers #

• NeumorphicDocumentViewer - Document viewing
• NeumorphicRecipeStepViewer - Recipe step-by-step

Other #

• NeumorphicContainer - Base neumorphic container
• NeumorphicAvatar - User avatar
• NeumorphicDropdown - Dropdown selector
• NeumorphicAlertDialog - Alert dialog
• NeumorphicGratitudePrompt - Gratitude journal prompt

Theme System #

Generate a complete color palette from a seed color:

import 'package:flutter_neumorphic_studio/flutter_neumorphic_studio.dart';

// Generate palette from seed color
final palette = PaletteGenerator.generate(
  seedColor: Color(0xFF6366f1), // Indigo
  isDarkMode: false,
);

// Use palette colors
final baseColor = palette.restBaseColor;
final textColor = palette.restTextColor;
final lightShadow = palette.lightShadowLight;
final darkShadow = palette.lightShadowDark;

Interactive Workbench #

Run the interactive workbench to explore all components:

cd example
flutter run

The workbench provides:

• Component Preview - See all component states (rest, hover, pressed, disabled)
• Real-Time Customization - Adjust colors, shadows, dimensions live
• Theme Creator - Design custom palettes with live preview
• Code Export - Copy component code snippets

Example App: Pet Rock Companion #

The package includes a complete example app - a whimsical "Pet Rock Companion" that demonstrates all neumorphic components in action.

Running the Example App #

# Clone the repo
git clone https://github.com/AI-Entourage/flutter-neumorphic-studio.git
cd flutter-neumorphic-studio

# Run the example app
cd example
flutter pub get
flutter run

Run on Web #

cd example
flutter run -d chrome

Run on iOS Simulator #

cd example
flutter run -d ios

What's in the Example App #

• Home Screen - Your pet rock with mood display and quick actions
• Mood Screen - Interactive mood slider demonstration
• Schedule Screen - Timeline and schedule components
• Profile Screen - Cards, lists, and avatar components
• Emergency Screen - SOS button and emergency UI patterns
• Settings Screen - Toggles, dropdowns, and form controls
• All Components - Browse every component in the library

Accessibility #

This package is designed with elderly users in mind:

• High Contrast - All components meet WCAG contrast ratios
• Large Touch Targets - Minimum 48x48dp touch areas
• Clear Visual States - Distinct hover, pressed, disabled states
• Voice-First Ready - Components support screen readers

Requirements #

• Flutter SDK: ≥3.9.2
• Dart SDK: ≥3.9.2

License #

MIT License - see the LICENSE file for details.

Contributing #

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

Support #

• 📧 Open an issue
• ⭐ Star this repo if you find it useful!