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! 🙏

pub package License: MIT

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
  • 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

Libraries

common/animation_preset
common/enums
components/components
components/neumorphic/buttons/buttons
components/neumorphic/buttons/neumorphic_button
components/neumorphic/buttons/neumorphic_emergency_sos_button
components/neumorphic/buttons/neumorphic_icon_button
components/neumorphic/buttons/neumorphic_voice_recording_button
components/neumorphic/cards/cards
components/neumorphic/cards/neumorphic_balance_display_card
components/neumorphic/cards/neumorphic_bill_payment_card
components/neumorphic/cards/neumorphic_card
components/neumorphic/cards/neumorphic_contact_card
components/neumorphic/cards/neumorphic_event_card_rsvp
components/neumorphic/cards/neumorphic_exercise_energy_badge
components/neumorphic/cards/neumorphic_medication_card
components/neumorphic/cards/neumorphic_news_content_card
components/neumorphic/cards/neumorphic_plant_pet_care_card
components/neumorphic/cards/neumorphic_quick_action_tile
components/neumorphic/cards/neumorphic_scam_alert_card
components/neumorphic/cards/neumorphic_status_card
components/neumorphic/cards/neumorphic_supply_checklist_card
components/neumorphic/cards/neumorphic_timeline_feed_card
components/neumorphic/cards/neumorphic_weather_card
components/neumorphic/controls/controls
components/neumorphic/controls/neumorphic_mood_slider
components/neumorphic/controls/neumorphic_pain_rating_slider
components/neumorphic/controls/neumorphic_slider
components/neumorphic/controls/neumorphic_toggle
components/neumorphic/core/core
Core neumorphic design system abstractions.
components/neumorphic/core/neumorphic_color_derivation
components/neumorphic/core/neumorphic_shadow_builder
components/neumorphic/core/neumorphic_style
components/neumorphic/displays/displays
components/neumorphic/displays/neumorphic_live_transcription_display
components/neumorphic/displays/neumorphic_schedule_timeline
components/neumorphic/displays/neumorphic_sunrise_wake_display
components/neumorphic/flows/flows
components/neumorphic/flows/neumorphic_scan_document_flow
components/neumorphic/grids/grids
components/neumorphic/grids/neumorphic_appliance_status_grid
components/neumorphic/grids/neumorphic_group_call_tile_grid
components/neumorphic/grids/neumorphic_vitals_display_grid
components/neumorphic/indicators/indicators
components/neumorphic/indicators/neumorphic_badge
components/neumorphic/indicators/neumorphic_hydration_ring_indicator
components/neumorphic/indicators/neumorphic_loading_spinner
components/neumorphic/indicators/neumorphic_progress_bar
components/neumorphic/indicators/neumorphic_stepper
components/neumorphic/inputs/inputs
components/neumorphic/inputs/neumorphic_checkbox
components/neumorphic/inputs/neumorphic_multi_select_chip_group
components/neumorphic/inputs/neumorphic_radio
components/neumorphic/inputs/neumorphic_text_field
components/neumorphic/lists/lists
components/neumorphic/lists/neumorphic_list_item
components/neumorphic/lists/neumorphic_list_view
components/neumorphic/lists/neumorphic_prayer_task_list
components/neumorphic/media/media
components/neumorphic/media/neumorphic_camera_capture_view
components/neumorphic/media/neumorphic_playlist_media_card
components/neumorphic/media/neumorphic_video_call_interface
components/neumorphic/media/neumorphic_video_player_exercise
components/neumorphic/navigation/neumorphic_map_navigation_view
components/neumorphic/neumorphic
components/neumorphic/other/neumorphic_alert_dialog
components/neumorphic/other/neumorphic_avatar
components/neumorphic/other/neumorphic_container
components/neumorphic/other/neumorphic_dropdown
components/neumorphic/other/neumorphic_gratitude_prompt
components/neumorphic/other/other
components/neumorphic/panels/neumorphic_expansion_panel
components/neumorphic/panels/neumorphic_sound_timer_panel
components/neumorphic/panels/panels
components/neumorphic/selectors/neumorphic_folder_grid_selector
components/neumorphic/selectors/neumorphic_transportation_selector
components/neumorphic/selectors/selectors
components/neumorphic/viewers/neumorphic_document_viewer
components/neumorphic/viewers/neumorphic_recipe_step_viewer
components/neumorphic/viewers/viewers
flutter_neumorphic_studio
Flutter Neumorphic Studio - A comprehensive neumorphic design system
main
playground/component_types
playground/controls/alert_dialog_controls
playground/controls/all_controls
Barrel file exporting all component controls classes.
playground/controls/appliance_status_grid_controls
playground/controls/avatar_controls
playground/controls/badge_controls
playground/controls/balance_display_card_controls
playground/controls/bill_payment_card_controls
playground/controls/button_controls
playground/controls/camera_capture_view_controls
playground/controls/card_controls
playground/controls/checkbox_controls
playground/controls/contact_card_controls
playground/controls/container_controls
playground/controls/control_section_builder
playground/controls/document_viewer_controls
playground/controls/emergency_sos_button_controls
playground/controls/event_card_rsvp_controls
playground/controls/exercise_energy_badge_controls
playground/controls/expansion_panel_controls
playground/controls/folder_grid_selector_controls
playground/controls/gratitude_prompt_controls
playground/controls/group_call_tile_grid_controls
playground/controls/hydration_ring_indicator_controls
playground/controls/icon_button_controls
playground/controls/list_controls
playground/controls/list_item_controls
playground/controls/live_transcription_display_controls
playground/controls/loading_spinner_controls
playground/controls/map_navigation_view_controls
playground/controls/medication_card_controls
playground/controls/mood_slider_controls
playground/controls/multi_select_chip_group_controls
playground/controls/news_content_card_controls
playground/controls/pain_rating_slider_controls
playground/controls/plant_pet_care_card_controls
playground/controls/playlist_media_card_controls
playground/controls/prayer_task_list_controls
playground/controls/progress_bar_controls
playground/controls/quick_action_controls
playground/controls/radio_controls
playground/controls/recipe_step_viewer_controls
playground/controls/scam_alert_card_controls
playground/controls/scan_document_flow_controls
playground/controls/schedule_timeline_controls
playground/controls/search_bar_controls
playground/controls/slider_controls
playground/controls/sound_timer_panel_controls
playground/controls/status_card_controls
playground/controls/stepper_controls
playground/controls/sunrise_wake_display_controls
playground/controls/supply_checklist_card_controls
playground/controls/text_field_controls
playground/controls/timeline_feed_card_controls
playground/controls/toggle_controls
playground/controls/transportation_selector_controls
playground/controls/video_call_interface_controls
playground/controls/video_player_exercise_controls
playground/controls/vitals_display_grid_controls
playground/controls/voice_recording_button_controls
playground/controls/weather_card_controls
playground/previews/alert_dialog_preview
playground/previews/all_previews
Barrel file exporting all component preview builder functions.
playground/previews/appliance_status_grid_preview
playground/previews/avatar_preview
playground/previews/badge_preview
playground/previews/balance_display_card_preview
playground/previews/bill_payment_card_preview
playground/previews/button_preview
playground/previews/camera_capture_view_preview
playground/previews/card_preview
playground/previews/checkbox_preview
playground/previews/contact_card_preview
playground/previews/container_preview
playground/previews/document_viewer_preview
playground/previews/emergency_sos_button_preview
playground/previews/event_card_rsvp_preview
playground/previews/exercise_energy_badge_preview
playground/previews/expansion_panel_preview
playground/previews/folder_grid_selector_preview
playground/previews/gratitude_prompt_preview
playground/previews/group_call_tile_grid_preview
playground/previews/hydration_ring_indicator_preview
playground/previews/icon_button_preview
playground/previews/list_item_preview
playground/previews/list_preview
playground/previews/live_transcription_display_preview
playground/previews/loading_spinner_preview
playground/previews/map_navigation_view_preview
playground/previews/medication_card_preview
playground/previews/mood_slider_preview
playground/previews/multi_select_chip_group_preview
playground/previews/news_content_card_preview
playground/previews/pain_rating_slider_preview
playground/previews/plant_pet_care_card_preview
playground/previews/playlist_media_card_preview
playground/previews/prayer_task_list_preview
playground/previews/progress_bar_preview
playground/previews/quick_action_preview
playground/previews/radio_preview
playground/previews/recipe_step_viewer_preview
playground/previews/scam_alert_card_preview
playground/previews/scan_document_flow_preview
playground/previews/schedule_timeline_preview
playground/previews/search_bar_preview
playground/previews/slider_preview
playground/previews/sound_timer_panel_preview
playground/previews/status_card_preview
playground/previews/stepper_preview
playground/previews/sunrise_wake_display_preview
playground/previews/supply_checklist_card_preview
playground/previews/text_field_preview
playground/previews/timeline_feed_card_preview
playground/previews/toggle_preview
playground/previews/transportation_selector_preview
playground/previews/video_call_interface_preview
playground/previews/video_player_exercise_preview
playground/previews/vitals_display_grid_preview
playground/previews/voice_recording_button_preview
playground/previews/weather_card_preview
playground/state/alert_dialog_state
playground/state/all_states
Barrel file exporting all component state classes.
playground/state/appliance_status_grid_state
playground/state/avatar_state
playground/state/badge_state
playground/state/balance_display_card_state
playground/state/base_component_state
playground/state/bill_payment_card_state
playground/state/button_state
playground/state/camera_capture_view_state
playground/state/card_state
playground/state/checkbox_state
playground/state/contact_card_state
playground/state/container_state
playground/state/document_viewer_state
playground/state/emergency_sos_button_state
playground/state/event_card_rsvp_state
playground/state/exercise_energy_badge_state
playground/state/expansion_panel_state
playground/state/folder_grid_selector_state
playground/state/gratitude_prompt_state
playground/state/group_call_tile_grid_state
playground/state/hydration_ring_indicator_state
playground/state/icon_button_state
playground/state/list_item_state
playground/state/list_state
playground/state/live_transcription_display_state
playground/state/loading_spinner_state
playground/state/map_navigation_view_state
playground/state/medication_card_state
playground/state/mood_slider_state
playground/state/multi_select_chip_group_state
playground/state/news_content_card_state
playground/state/pain_rating_slider_state
playground/state/plant_pet_care_card_state
playground/state/playlist_media_card_state
playground/state/prayer_task_list_state
playground/state/progress_bar_state
playground/state/quick_action_state
playground/state/radio_state
playground/state/recipe_step_viewer_state
playground/state/scam_alert_card_state
playground/state/scan_document_flow_state
playground/state/schedule_timeline_state
playground/state/search_bar_state
playground/state/slider_state
playground/state/sound_timer_panel_state
playground/state/status_card_state
playground/state/stepper_state
playground/state/sunrise_wake_display_state
playground/state/supply_checklist_card_state
playground/state/text_field_state
playground/state/timeline_feed_card_state
playground/state/toggle_state
playground/state/transportation_selector_state
playground/state/video_call_interface_state
playground/state/video_player_exercise_state
playground/state/vitals_display_grid_state
playground/state/voice_recording_button_state
playground/state/weather_card_state
playground/utils/animated_border_painter
playground/utils/device_frame_wrapper
playground/utils/device_presets
playground/utils/preview_background_wrapper
Widget that wraps a preview and injects themedBackgroundColor.
playground/utils/preview_enums
Enums for component preview display modes and backgrounds.
playground/utils/resettable_state
playground/utils/state_variants_wrapper
playground/utils/theme_color_mapper
playground/utils/themed_background_provider
InheritedWidget to provide themed background color from palette.
playground/widgets/color_picker_dialog
theme/design_tokens
theme/neumorphic_state_properties
theme/neumorphic_theme
theme/neumorphic_theme_extension
theme/theme
theme/theme_generator
workbench/features/code_view/code_view_panel
workbench/features/component_export/code_generator
workbench/features/component_export/component_exporter
workbench/features/component_export/export_dialog
workbench/features/component_export/export_options
workbench/features/component_export/templates/alert_dialog_template
workbench/features/component_export/templates/avatar_template
workbench/features/component_export/templates/badge_template
workbench/features/component_export/templates/button_template
workbench/features/component_export/templates/checkbox_template
workbench/features/component_export/templates/emergency_sos_button_template
workbench/features/component_export/templates/gratitude_prompt_template
workbench/features/component_export/templates/icon_button_template
workbench/features/component_export/templates/list_item_template
workbench/features/component_export/templates/list_view_template
workbench/features/component_export/templates/loading_spinner_template
workbench/features/component_export/templates/medication_card_template
workbench/features/component_export/templates/mood_slider_template
workbench/features/component_export/templates/pain_rating_slider_template
workbench/features/component_export/templates/progress_bar_template
workbench/features/component_export/templates/quick_action_template
workbench/features/component_export/templates/radio_template
workbench/features/component_export/templates/search_bar_template
workbench/features/component_export/templates/slider_template
workbench/features/component_export/templates/text_field_template
workbench/features/component_export/templates/toggle_template
workbench/features/component_export/templates/voice_recording_button_template
workbench/features/device_preview/component_isolated_preview
workbench/features/device_preview/device_preview_controls
workbench/features/device_preview/device_preview_panel
workbench/features/device_preview/device_preview_settings
workbench/features/device_preview/device_preview_state
workbench/features/theme_creator/color_edit_dialog
workbench/features/theme_creator/palette_generator
workbench/features/theme_creator/palette_preview
workbench/features/theme_creator/save_theme_dialog
workbench/features/theme_creator/saved_themes_dialog
workbench/features/theme_creator/seed_color_picker
workbench/features/theme_creator/theme_creator_panel
workbench/features/theme_creator/theme_dropdown
workbench/features/theme_creator/theme_exporter
workbench/features/theme_creator/theme_storage
workbench/registry/component_category
workbench/registry/component_definition
workbench/registry/component_registry
workbench/side_menu/side_menu
workbench/state/themeable_state
workbench/top_bar
workbench/views/dual_theme_view
DualThemeView widget for the Component Workbench.
workbench/views/playground_home
PlaygroundHome widget for the Component Workbench.
workbench/views/playground_views
Playground view widgets for the Component Workbench.
workbench/workbench_shell