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

​
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

Basic snackbar with message: 
HuxSnackbar(
  message: 'This is a simple snackbar message',
)

​
Dismissible Snackbar

Snackbar that can be dismissed by the user: 
HuxSnackbar(
  message: 'Click the X to dismiss this message',
  onDismiss: () {
    // Handle dismiss action
    print('Snackbar dismissed');
  },
)

​
Auto-dismiss Snackbar

Snackbar that automatically disappears after a set duration: 
HuxSnackbar(
  message: 'This will disappear in 5 seconds',
  autoDismiss: true,
  dismissDuration: Duration(seconds: 5),
)

​
Properties

​
HuxSnackbar Properties

PropertyTypeDefaultDescription
messageStringrequiredThe message text to display
variantHuxAlertVariantinfoVisual variant of the snackbar
onDismissVoidCallback?nullCallback when dismiss button is pressed
autoDismissboolfalseWhether to automatically dismiss after duration
dismissDurationDuration5 secondsHow long to wait before auto-dismissing
showDismissButtonbooltrueWhether to show the dismiss button
dismissButtonTextString'Dismiss'Text for the dismiss button

​
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,
)

​
Custom Dismiss Button

Customize the dismiss button appearance: 
HuxSnackbar(
  message: 'Custom dismiss button',
  dismissButtonText: 'Got it!',
  onDismiss: () => print('Custom dismiss action'),
)

​
Layout Options

​
Full Width

Snackbar that spans the full width of its container: 
HuxSnackbar(
  message: 'Full width snackbar message',
  width: double.infinity,
)

​
Custom Width

Snackbar with specific width: 
HuxSnackbar(
  message: 'Custom width snackbar',
  width: 300,
)

​
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

​
Custom Color Overrides

HuxSnackbar(
  message: 'Custom colored snackbar',
  backgroundColor: Colors.deepPurple,
  textColor: Colors.white,
  dismissButtonColor: Colors.purpleAccent,
)

​
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
  • Variant information is conveyed through ARIA attributes

​
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
⌘I