Skip to main content

​
Overview

HuxSnackbar is a message box component that provides clear communication to users through semantic variants (info, success, error) and dismissible functionality. It features a modern glassmorphism design with backdrop blur effects that automatically adapts to light and dark themes while maintaining excellent readability and accessibility.

​
Key Features

  • Glassmorphism Design: Modern frosted glass effect with backdrop blur
  • Fixed Width: Consistent 400px width positioned at bottom-left
  • Theme-Adaptive: Different blur intensities for light (5px) and dark (10px) modes
  • Semantic Variants: Info, success, error, and warning states
  • Auto-positioning: Floating behavior with proper margins
  • Optional actions: Add interactive buttons like “Undo”
  • Optional stacking: Show multiple snackbars at once using the overlay controller

​
Component Variants

​
Info Snackbar

Informational messages with blue styling: Info snackbar 
HuxSnackbar(
  message: 'Your changes have been saved successfully!',
  variant: HuxSnackbarVariant.info,
  onDismiss: () => print('Dismissed'),
)

​
Success Snackbar

Positive confirmation messages with green styling: Success snackbar 
HuxSnackbar(
  message: 'Profile updated successfully!',
  variant: HuxSnackbarVariant.success,
  onDismiss: () => print('Dismissed'),
)

​
Error Snackbar

Error messages with red styling: Error snackbar 
HuxSnackbar(
  message: 'Failed to save changes. Please try again.',
  variant: HuxSnackbarVariant.error,
  onDismiss: () => print('Dismissed'),
)

​
Warning Snackbar

Warning messages with orange styling: 
HuxSnackbar(
  message: 'You have unsaved changes. Save before leaving?',
  variant: HuxSnackbarVariant.warning,
  onDismiss: () => print('Dismissed'),
)

​
Basic Usage

​
Simple Snackbar (via extension)

Show a snackbar from any widget with a BuildContext: 
context.showHuxSnackbar(message: 'This is a simple snackbar message');

​
Dismissible Snackbar

Snackbar that can be dismissed by the user: 
context.showHuxSnackbar(
  message: 'Click the X to dismiss this message',
  onDismiss: () => print('Snackbar dismissed'),
);

​
Snackbar with Actions (Undo / Retry / View)

Add one or more action buttons (for example, “Undo”): 
context.showHuxSnackbar(
  message: 'Item deleted',
  variant: HuxSnackbarVariant.info,
  actions: [
    HuxSnackbarAction(
      label: 'Undo',
      onPressed: () {
        // Restore the item
      },
    ),
  ],
);

​
Stacking multiple snackbars (overlay)

Flutter’s ScaffoldMessenger queues snackbars. To stack multiple snackbars (show them simultaneously), use the overlay controller: 
HuxSnackbarStackController.of(context).show(
  const HuxSnackbar(
    message: 'Saved',
    duration: Duration(seconds: 4),
  ),
);

HuxSnackbarStackController.of(context).show(
  const HuxSnackbar(
    message: 'Synced',
    duration: Duration(seconds: 4),
  ),
);

​
Properties

​
HuxSnackbar Properties

PropertyTypeDefaultDescription
messageStringrequiredThe message text to display
variantHuxSnackbarVariantinfoVisual variant of the snackbar
titleString?nullOptional title displayed above the message
onDismissVoidCallback?nullCallback when dismiss button is pressed
durationDuration4 secondsDuration the snackbar is displayed
showIconbooltrueWhether to show an icon in the snackbar
actionsList<HuxSnackbarAction>?nullOptional action buttons (Undo/Retry/Close/etc.)

​
HuxSnackbarAction Properties

PropertyTypeDefaultDescription
labelStringrequiredButton label (e.g. "Undo")
onPressedVoidCallbackrequiredCallback when pressed
textColorColor?nullOptional label color override

​
HuxSnackbarVariant Enum

  • HuxSnackbarVariant.info - Blue styling for informational messages
  • HuxSnackbarVariant.success - Green styling for success confirmations
  • HuxSnackbarVariant.error - Red styling for error messages
  • HuxSnackbarVariant.warning - Orange styling for warning messages

​
Styling

​
Custom Colors

Override default colors for specific use cases: 
HuxSnackbar(
  message: 'Custom styled snackbar',
  variant: HuxSnackbarVariant.info,
  backgroundColor: Colors.deepPurple,
  textColor: Colors.white,
)

​
Colors

​
Theme-Aware Colors

Snackbar automatically adapts to light and dark themes:
  • Info: Blue tones with appropriate contrast
  • Success: Green tones with appropriate contrast
  • Error: Red tones with appropriate contrast
  • Warning: Orange tones with appropriate contrast

​
States

​
Default State

Normal snackbar appearance with all interactive elements enabled.

​
Dismissed State

Snackbar is removed from the UI after user interaction or auto-dismiss.

​
Loading State

For future enhancement - snackbar with loading indicator.

​
Accessibility

HuxSnackbar includes several accessibility features:

​
Screen Reader Support

  • Message content is properly announced
  • Dismiss button includes appropriate labels

​
Keyboard Navigation

  • Tab navigation to dismiss button
  • Enter/Space key support for dismissal
  • Escape key support for quick dismissal

​
High Contrast Support

  • Colors automatically adjust for high contrast themes
  • Maintains WCAG AA compliance (4.5:1 contrast ratio)

​
Best Practices

  • Use Info for general information and updates
  • Use Success for positive confirmations and achievements
  • Use Error for actual errors that need user attention
  • Use Warning for potential issues or important notices
  • Keep messages concise (under 2 lines when possible)
  • Use clear, action-oriented language
  • Avoid technical jargon unless necessary
  • Use auto-dismiss for informational messages (3-5 seconds)
  • Keep error messages visible until user dismisses
  • Consider user reading time for longer messages
  • Position at the top or bottom of the screen
  • Avoid covering important content
  • Consider mobile keyboard visibility

​
Examples

Form Feedback

Show success/error messages after form submission

User Notifications

Display system updates and user alerts

Action Confirmations

Confirm successful operations and actions

Error Handling

Gracefully handle and display errors