​
Overview

HuxSnackbar is a message box component that provides clear communication to users through semantic variants (info, success, error) and dismissible functionality. It automatically adapts to light and dark themes while maintaining excellent readability and accessibility. HuxAlert Examples

​
Component Variants

​
Info Snackbar

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

​
Success Snackbar

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

​
Error Snackbar

Error messages with red styling: 
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

​
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