Nash UI

pub package License: BSD-3-Clause Flutter

A modern, scalable, production-ready Flutter Design System built on Material 3.

nash_ui provides an opinionated design-token engine, theme factories, a responsive framework, an animation library, a complete catalog of reusable widgets, and full-screen UI templates — everything you need to ship beautiful, consistent apps faster.

Features

  • Design tokens — colors, typography, spacing, radius, shadows, gradients, borders, opacity, dimensions, icons, durations, curves, elevation, and image tokens.
  • Theme engine — AppTheme.light(), AppTheme.dark(), AppTheme.amoled() and fully custom themes via a ThemeExtension.
  • Responsive framework — AppResponsive, screen types, breakpoints and responsive number extensions (10.w, 20.h, 16.r, 5.v).
  • Animation library — fade, slide, scale, rotate, bounce, shake, ripple, hover, hero, page and shared-axis transitions, with reduced motion support.
  • Accessibility — WCAG AA/AAA compliance tokens, focus ring, touch targets, semantic announcements, and platform-adaptive widgets.
  • Widget catalog — buttons, inputs, cards, selection, media, feedback, lists, indicators, dialogs, charts, loading states, drag & drop, signature pad, watermark, countdown timers, sticky headers, accordion, syntax highlighting, markdown, and misc widgets.
  • Navigation — bottom navigation, navigation rail, drawer, top navigation and breadcrumb.
  • Localization — number, currency, date, time, and compact formatting.
  • Full-screen templates — login, register, forgot password, dashboard, settings, profile, chat, learning, finance, medical, e-commerce, social, admin and analytics.
  • Services & Utilities — network client (AppNetwork), biometric auth (AppBiometrics), permissions (AppPermissions), notifications (AppNotifications), Debouncer, Throttler, validators, formatters, and color/date helpers.
  • Quality — fully documented public API, unit/widget/golden tests and a GitHub Actions CI/CD workflow.

Getting started

Add the dependency

From pub.dev:

flutter pub add nash_ui

Or add it directly to your pubspec.yaml:

dependencies:
  nash_ui: ^2.11.9

Then run:

flutter pub get

Quick start

import 'package:flutter/material.dart';
import 'package:nash_ui/nash_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: AppTheme.light(),
      darkTheme: AppTheme.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: 'Dashboard'),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: const <Widget>[
            PrimaryButton(
              label: 'Get started',
              icon: Icons.rocket_launch_outlined,
            ),
            Gap(16),
            AppTextField(label: 'Email', hint: 'you@example.com'),
          ],
        ),
      ),
    );
  }
}

Themes

Every theme factory is built from a seed color using the Material 3 color system.

Theme Description
AppTheme.light() Default light theme from the brand palette.
AppTheme.dark() Dark theme from the brand palette.
AppTheme.amoled() True-black (AMOLED) theme.
AppTheme.custom(colorScheme: ...) Fully custom theme from any ColorScheme. 
MaterialApp(
  theme: AppTheme.light(seedColor: const Color(0xFF10B981)),
  darkTheme: AppTheme.dark(seedColor: const Color(0xFF10B981)),
  themeMode: ThemeMode.system,
)

See Themes for details on tokens and customization.

Responsive

final AppScreenType type = AppResponsive.screenTypeOf(context);
if (type.isDesktop) {
  return const NavDrawer(...);
}
return const BottomNavBar(...);

For pixel-perfect scaling against a design reference:

AppResponsive(
  designWidth: 390,
  designHeight: 844,
  child: const MyApp(),
)

See Responsive for the full breakpoint reference.

Widget catalog

Category Widgets
Buttons PrimaryButton, SecondaryButton, OutlineButton, AppTextButton, AppIconButton, FloatingButton, LoadingButton, NeonButton, GlassButton, GradientBorderButton, SlideButton, SplitButton, HoldButton, SocialButton, ButtonGroup, SpeedDial
Inputs AppTextField, PasswordField, EmailField, NumberField, PhoneField, SearchField, OtpField, OtpPinField, MentionField, AppDropdown, DateField, MultiSelect, GradientPicker, TimelinePicker, RichTextEditor
Forms Form, FormTextField, FormWizard, ReactiveField, ReactiveFormController
Cards AppCard, CreditCardWidget, BoardingPassCard, GlassmorphicContainer, ParallaxCard, ReceiptCard, PriceTag, InboxCard, LocationPinCard, CornerRibbon, DashboardCard, ProductCard, UserCard, MedicalCard, LearningCard, SwipeActionCard
Media VoiceNotePlayer, EqualizerWidget, AudioWaveform, BeforeAfterImage, CameraCapture, ProductImageZoom, MagnifierLens, AppAvatar, AppImage, AppNetworkImage
Feedback AppSnackbar, AppBanner, AppTooltip, PushNotificationCard, ConfettiWidget, NotificationCenter
Navigation AppNavigationRail, BottomNavBar, NavDrawer, Breadcrumb, CustomAppBar, AppTabBar
Dialogs AppDialog, NumberPadDialog, AppRatingDialog, AppBottomSheet, ActionSheet, AppPopupMenu, AdaptiveDialog, AdaptiveActionSheet
Charts LineChart, BarChart, PieChart, CandlestickChart, BubbleChart, TreeMapChart, SparklineWidget, RadarChart, FunnelChart, HeatMap, GanttChart
Loading AppLoader, LiquidProgressBar, CircularProgress, LinearProgress, Skeleton, SkeletonList, SkeletonGrid, Shimmer, LoadingScreen
Indicators AppBadge, Gap, DistanceBar, NetworkStatusBar, TypingIndicator, progress indicators
Data EnhancedDataTable, TablePagination, DraggableDashboard, DraggableList, DropZone, DraggableWidget
Pickers showStyledTimePicker, showDateRangeDialog, showDurationPicker, showTimeRangePicker, ReactionPicker
Stepper AppStepper (horizontal/vertical), DeliveryTracker, AppStepState
Adaptive AdaptiveScaffold, AdaptiveSwitch, AdaptiveProgress, AppPlatform
Accessibility AppFocusRing, AppTouchTarget, AppAccessibilityProvider, AppSemanticsAnnouncer, AppAccessibleButton
Misc WheelOfFortune, FloatingParticles, GradientText, AnimatedTextKit, AnimatedCounter, ScratchReveal, ScratchCard, MiniMap, OnboardingOverlay, PatternLock, SecurityPinKeyboard, BiometricButton, ThemeSwitcherFab, JsonViewer, DebugOverlay, GestureHintOverlay, PermissionRequestCard, SignaturePad, Watermark, CountDownTimer, StopWatch, StickyHeaderList, Accordion, SyntaxHighlighter, MarkdownText, PollWidget, QrCodeWidget, BarcodeWidget, AppCalendar, AppRating, AppTimeline, AppTag, AppMasonry
UX screens UpdateRequiredScreen, Loading, empty state, no internet, 404, error, success, maintenance, permission, update required

See Widgets for the full API reference.

Templates

Full-screen, production-ready layouts:

AuthTemplates.login, AuthTemplates.signup, AuthTemplates.forgotPassword, DashboardHeader, SettingsTemplate, ProfileTemplate, ChatTemplate, LearningTemplate, FinanceTemplate, MedicalTemplate, EcommerceTemplate, SocialTemplate, AdminTemplate, AnalyticsTemplate.

See Templates.

Utilities

Validators (Validators), formatters (AppFormatter), and helpers for dates, colors, numbers, animations, files, images, permissions and devices. See Utilities.

Documentation

Guide Description
Getting started Setup, dependency and first app
Design tokens Colors, typography, spacing, radius, shadows
Themes Light/dark/AMOLED/custom themes
Responsive Breakpoints and screen helpers
Animations Motion library reference
Widgets Widget catalog with examples
Templates Full-screen template layouts
Utilities Validators, formatters and helpers
Testing Unit, widget, golden and integration tests

Example application

A complete demo app is included under example/ showcasing theme switching, responsive preview, the animation gallery, the widget catalog, forms, charts, a dashboard and the template gallery.

cd example
flutter run

Testing

flutter analyze
flutter test                # unit + widget + golden tests
flutter test --update-goldens test/golden_test.dart   # refresh golden images

cd example
flutter test integration_test/app_test.dart -d windows  # integration tests

See Testing.

License

Nash UI is licensed under the BSD 3-Clause License.

Copyright © 2026 Nashwan Taha Nheli. All rights reserved.

See the LICENSE file for the complete terms and conditions.

Libraries

accessibility/accessibility
Exports for the accessibility layer.
accessibility/accessibility_tokens
animation/animated_button
animation/animated_container
animation/animation
Exports for the animation layer.
animation/bounce
animation/duration
animation/fade
animation/hero
animation/hover
animation/page_transition
animation/reduced_motion
animation/ripple
animation/scale
animation/shared_axis_transition
animation/slide
borders/border
colors/brand_colors
colors/colors
Exports for the colors layer.
colors/palette
dimensions/dimensions
elevation/elevation
Exports for the elevation layer.
elevation/elevation_tokens
extensions/color_extensions
extensions/context_extensions
extensions/date_extensions
extensions/extensions
Exports for the extensions layer.
extensions/list_extensions
extensions/num_extensions
extensions/padding_extensions
extensions/string_extensions
extensions/theme_extensions
extensions/widget_extensions
gradients/brand_gradients
gradients/gradients
icons/app_icons
icons/icons
layouts/container
layouts/flex
layouts/gap
layouts/grid
layouts/layouts
Exports for the layouts layer.
layouts/padding
layouts/position
layouts/responsive
layouts/rtl_aware_row
localization/localization
media/image_tokens
nash_ui
Nash UI — a modern, scalable, production-ready Flutter design system.
opacity/opacity
radius/app_radius
radius/radius
responsive/breakpoint
responsive/responsive
Exports for the responsive layer.
responsive/responsive_extensions
responsive/responsive_grid
responsive/responsive_layout
responsive/screen_type
services/async_builder
services/biometrics
services/clipboard
services/logger
services/network
services/network_io
services/network_stub
services/network_web
services/notifications
services/permissions
services/services
Exports for the services layer.
services/storage
shadows/shadow
shadows/shadows
spacing/app_spacing
spacing/spacing
theme/app_theme
theme/theme
theme/theme_builder
theme/theme_extension
typography/app_typography
typography/font_config
typography/font_weight
typography/responsive_typography
typography/typography
utils/animation_utils
utils/color_utils
utils/date_utils
utils/debouncer
utils/device_utils
utils/file_utils
utils/formatter
utils/helpers
utils/image_utils
utils/number_utils
utils/permission_utils
utils/rtl_utils
utils/token_exporter
utils/utils
Exports for the utils layer.
utils/validators
Validation helpers and extension methods for common field checks.
widgets/adaptive/adaptive
widgets/buttons/button_group
widgets/buttons/buttons
Exports for the buttons layer.
widgets/buttons/floating_button
widgets/buttons/glass_button
widgets/buttons/gradient_border_button
widgets/buttons/hold_button
widgets/buttons/icon_button
widgets/buttons/loading_button
widgets/buttons/morph_button
widgets/buttons/neon_button
widgets/buttons/outline_button
widgets/buttons/primary_button
widgets/buttons/secondary_button
widgets/buttons/slide_button
widgets/buttons/social_button
widgets/buttons/speed_dial
widgets/buttons/split_button
widgets/buttons/text_button
widgets/cards/boarding_pass_card
widgets/cards/card
widgets/cards/cards
Exports for the cards layer.
widgets/cards/content_cards
widgets/cards/corner_ribbon
widgets/cards/credit_card_widget
widgets/cards/dashboard_card
widgets/cards/domain_cards
widgets/cards/flip_card
widgets/cards/glassmorphic_container
widgets/cards/inbox_card
widgets/cards/location_pin_card
widgets/cards/parallax_card
widgets/cards/price_tag
widgets/cards/receipt_card
widgets/cards/swipe_action_card
widgets/cards/swipeable_cards
widgets/charts/bubble_chart
widgets/charts/candlestick_chart
widgets/charts/chart_widgets
widgets/charts/charts
Exports for the charts layer.
widgets/charts/funnel_chart
widgets/charts/gantt_chart
widgets/charts/heat_map
widgets/charts/nash_charts
widgets/charts/radar_chart
widgets/charts/sparkline_widget
widgets/charts/tree_map_chart
widgets/data_table/data_table
Exports for the data_table layer.
widgets/data_table/enhanced_data_table
widgets/dialogs/action_sheet
widgets/dialogs/bottom_sheet
widgets/dialogs/command_palette
widgets/dialogs/dialog
widgets/dialogs/dialogs
Exports for the dialogs layer.
widgets/dialogs/draggable_sheet
widgets/dialogs/number_pad_dialog
widgets/dialogs/popover
widgets/drag_drop/_draggable_helper
widgets/drag_drop/drag_drop
Exports for the drag_drop layer.
widgets/drag_drop/drag_drop_widgets
widgets/feedback/confetti_widget
widgets/feedback/connectivity_banner
widgets/feedback/connectivity_check_io
widgets/feedback/connectivity_check_stub
widgets/feedback/connectivity_check_web
widgets/feedback/error_boundary
widgets/feedback/feedback
Exports for the feedback layer.
widgets/feedback/inline_alert
widgets/feedback/push_notification_card
widgets/feedback/snackbar
widgets/feedback/toast
widgets/feedback/tooltip
widgets/forms/_form_helper
widgets/forms/form_helpers
widgets/forms/form_wizard
widgets/forms/forms
Exports for the forms layer.
widgets/forms/nash_form
widgets/forms/reactive_form
widgets/indicators/circular_progress
widgets/indicators/indicators
Exports for the indicators layer.
widgets/indicators/linear_progress
widgets/indicators/liquid_progress_bar
widgets/indicators/loader
widgets/indicators/progress_ring
widgets/indicators/segmented_progress_bar
widgets/inputs/app_range_slider
widgets/inputs/color_picker
widgets/inputs/date_field
widgets/inputs/date_picker
widgets/inputs/email_field
widgets/inputs/file_upload
widgets/inputs/gradient_picker
widgets/inputs/inputs
Exports for the inputs layer.
widgets/inputs/mention_field
widgets/inputs/multi_select
widgets/inputs/number_field
widgets/inputs/otp_field
widgets/inputs/otp_pin_field
widgets/inputs/password_field
widgets/inputs/phone_field
widgets/inputs/search_field
widgets/inputs/security_pin_keyboard
widgets/inputs/sliders
widgets/inputs/stepper_input
widgets/inputs/tag_input
widgets/inputs/text_field
widgets/inputs/timeline_picker
widgets/layouts/split_view
widgets/lists/data_table
widgets/lists/expansion_tile
widgets/lists/infinite_list
widgets/lists/list_tile
widgets/lists/lists
Exports for the lists layer.
widgets/lists/pagination
widgets/lists/settings_tile
widgets/lists/stat_tile
widgets/lists/sticky_header_list
widgets/lists/tree_view
widgets/loading/loading
Exports for the loading layer.
widgets/loading/loading_widgets
widgets/loading/shimmer
widgets/media/audio_waveform
widgets/media/avatar
widgets/media/before_after_image
widgets/media/camera_capture
widgets/media/equalizer_widget
widgets/media/image
widgets/media/image_tokens
widgets/media/image_viewer
widgets/media/magnifier_lens
widgets/media/media
Exports for the media layer.
widgets/media/network_image
widgets/media/pinchable_image
widgets/media/product_image_zoom
widgets/media/voice_note_player
widgets/misc/accordion
widgets/misc/animated_counter
widgets/misc/app_context_menu
widgets/misc/app_masonry
widgets/misc/app_rating_dialog
widgets/misc/badge
widgets/misc/biometric_button
widgets/misc/bottom_sheet_draggable
widgets/misc/calendar
widgets/misc/chat_bubble
widgets/misc/code_block
widgets/misc/color_swatch_viewer
widgets/misc/copy_button
widgets/misc/count_down_timer
widgets/misc/debug_overlay
widgets/misc/delivery_tracker
widgets/misc/distance_bar
widgets/misc/draggable_dashboard
widgets/misc/expandable_text
widgets/misc/floating_particles
widgets/misc/gesture_hint_overlay
widgets/misc/glow_border_widget
widgets/misc/gradient_text
widgets/misc/json_viewer
widgets/misc/mini_map
widgets/misc/misc
Exports for the misc layer.
widgets/misc/network_status_bar
widgets/misc/onboarding_overlay
widgets/misc/parallax_list_item
widgets/misc/pattern_lock
widgets/misc/permission_request_card
widgets/misc/poll_widget
widgets/misc/pull_to_reveal
widgets/misc/qr_barcode_widget
widgets/misc/rating
widgets/misc/reaction_picker
widgets/misc/scratch_card
widgets/misc/scratch_reveal
widgets/misc/signature_pad
widgets/misc/spotlight_highlight
widgets/misc/stepper
widgets/misc/tag
widgets/misc/theme_switcher_fab
widgets/misc/timeline
widgets/misc/typing_indicator
widgets/misc/watermark
widgets/misc/wheel_of_fortune
widgets/navigation/animated_tab_bar
widgets/navigation/app_bar
widgets/navigation/bottom_nav_bar
Exports for the navigation layer.
widgets/navigation/tab_bar
widgets/notifications/app_toast
widgets/notifications/notification_center
widgets/notifications/notifications
Exports for the notifications layer.
widgets/pickers/pickers
widgets/rich_text/animated_text_kit
widgets/rich_text/markdown_text
widgets/rich_text/rich_text
Exports for the rich_text layer.
widgets/rich_text/rich_text_editor
widgets/rich_text/syntax_highlighter
widgets/selection/controls
widgets/selection/segmented_button
widgets/selection/selection
Exports for the selection layer.
widgets/templates/admin_template
widgets/templates/analytics_template
widgets/templates/auth_templates
widgets/templates/chat_template
widgets/templates/ecommerce_template
widgets/templates/finance_template
widgets/templates/learning_template
widgets/templates/medical_template
widgets/templates/onboarding_templates
widgets/templates/profile_template
widgets/templates/settings_template
widgets/templates/social_template
widgets/templates/templates
Exports for the templates layer.
widgets/ux/update_required_screen
widgets/ux/ux
Exports for the ux layer.
widgets/ux/ux_states
widgets/widgets
Top-level export for the widgets layer.