CustomSnackbar

CustomSnackbar is a highly customizable and reusable Snackbar implementation for Flutter applications. It extends Flutter's default SnackBar with enhanced features like icons, progress indicators, close buttons, borders, and better theming support, making it suitable for professional app development.

Key Improvements Over Default SnackBar

✔ Visual Enhancements – Icons, borders, and progress indicators
✔ Better Theming – Automatic dark mode + manual overrides
✔ Improved UX – Close button, swipe control, and multiline support
✔ Custom Animations – Fine-tuned entry/exit effects

Features

  • Highly customizable snackbar with multiple configuration options
  • Dark mode support with automatic theme adaptation
  • Icon support with customizable color and size
  • Progress indicator option for loading states
  • Close button for manual dismissal
  • Border styling for better visual separation
  • Multiline support for longer messages
  • Action button integration
  • Custom animations and durations
  • Responsive design that works on all screen sizes

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_snackbar: ^0.0.1

Basic Usage

Success Snackbar

CustomSnackbar.show(
  context,
  message: "Operation successful!",
  backgroundColor: Colors.green,
  icon: Icons.check_circle,
);

Error Snackbar with Action

CustomSnackbar.show(
  context,
  message: "Error occurred!",
  backgroundColor: Colors.red,
  action: SnackBarAction(
    label: "Retry",
    onPressed: () => _retryOperation(),
  ),
);

Loading Snackbar

CustomSnackbar.show(
  context,
  message: "Processing...",
  showProgressIndicator: true,
  duration: Duration(seconds: 5),
);

Best Practices

1. Accessibility

  • Ensure sufficient contrast between text and background
  • Provide meaningful icons for visual cues
  • Maintain readable text size (minimum 16sp)
  • Support dismissal via swipe and close button

2. Performance

  • Use appropriate durations (2-4 seconds for most messages)
  • Avoid excessive snackbars stacking up
  • Use const constructors where possible
  • Limit animations for frequent notifications

3. Internationalization

  • Localize all message text
  • Consider text expansion in multilingual apps
  • Support RTL layouts automatically

4. User Experience

  • Use different colors for different message types
  • Include icons for quick recognition
  • Provide actions for important notifications
  • Allow manual dismissal for critical messages

Comparison with Flutter's Default Snackbar

Feature CustomSnackbar Flutter SnackBar
Icons ✅ Yes ❌ No
Progress Indicator ✅ Yes ❌ No
Close Button ✅ Configurable ❌ No
Border Styling ✅ Yes ❌ No
Multiline Support ✅ Full control ❌ Limited
Dark Mode ✅ Auto + manual ✅ Theme only
Custom Duration ✅ Per instance ✅ Yes
Action Button ✅ Enhanced ✅ Basic
Animation Control ✅ Yes ❌ No

Libraries

apptomate_custom_snackbar