Snackbar Flutter #

A highly customizable Flutter package for displaying beautiful snackbar notifications with 24 different pre-built styles. From classic designs to modern glassmorphism, neon effects, and pixel art - this package has it all!

🎯 Try it Live! #

👉 Click here for Interactive Demo

Test all 24 snackbar styles in your browser! The demo includes:

• 📱 iPhone 17 Pro Max frame preview
• 🎨 Real-time style switching
• 🎭 Customizable colors, positions, and dismiss directions
• ⚙️ All configuration options

✨ Features #

• 🎨 24+ Pre-built Styles: Classic, Frosted, Minimal, Gradient, Floating, Material You, iOS, Outlined, Compact, Expanded, Icon Only, Neon, Neumorphic, Card, Pill, Banner, Grunge, Bubble, Striped, Pixel, Glass, 3D, Dotted, and Diagonal
• 🎯 10 Built-in Types: Success, Error, Warning, Info, Primary, Secondary, Dark, Light, Gradient, and Custom
• 📍 Flexible Positioning: Top or Bottom
• 🎭 Smooth Animations: Slide, fade, and scale animations
• 👆 Interactive: Dismissible by swipe (left, right, top, bottom, any direction), tap callbacks, and action buttons
• 🎨 Fully Customizable: Custom colors, icons, titles, messages, fonts, and complete custom builders
• 🎨 Text Customization: Custom title & message colors, font sizes, and font weights
• 🚀 Easy to Use: Simple one-line implementation
• ⚡ Lightweight: No external dependencies except Flutter
• 🌐 Live Demo: Interactive web demo available at goutam.uk/snackbar_flutter
• 📦 Repository: GitHub

📱 Demo #

🌐 Try the Interactive Web Demo

Preview all 24 styles with iPhone frame, real-time customization, and all configuration options!

🚀 Getting Started #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  snackbar_flutter: ^0.0.1

Or install it from the command line:

flutter pub add snackbar_flutter

Import #

import 'package:snackbar_flutter/snackbar_flutter.dart';

📖 Usage #

Basic Usage #

CustomSnackBar.show(
  context: context,
  message: 'This is a success message!',
  type: SnackBarType.success,
  style: SnackBarStyle.classic,
);

With All Options #

CustomSnackBar.show(
  context: context,
  message: 'Your profile has been updated successfully!',
  type: SnackBarType.success,
  style: SnackBarStyle.gradient,
  position: SnackBarPosition.top,
  duration: const Duration(seconds: 4),
  title: 'Profile Updated',
  customIcon: Icons.person,
  customColor: Colors.purple,
  onTap: () {
    print('Snackbar tapped!');
  },
  actionLabel: 'UNDO',
  onActionPressed: () {
    print('Action button pressed!');
  },
  dismissible: true,
  width: 350,
  margin: EdgeInsets.all(20),
  replaceExisting: true, // Only one snackbar at a time
  dismissDirection: SnackBarDismissDirection.left, // Dismiss by swiping left
  titleColor: Colors.white,
  messageColor: Colors.white70,
  titleFontSize: 16,
  messageFontSize: 14,
  titleFontWeight: FontWeight.bold,
  messageFontWeight: FontWeight.normal,
);

With Custom Builder (Full Control) #

CustomSnackBar.show(
  context: context,
  message: 'Custom message',
  title: 'Custom title',
  customBuilder: (context, title, message, color, icon) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black26)],
      ),
      child: Row(
        children: [
          Icon(icon, color: Colors.white),
          SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                Text(message, style: TextStyle(color: Colors.white70)),
              ],
            ),
          ),
        ],
      ),
    );
  },
);

🎨 Available Styles #

1. Classic #

Traditional filled design with icon and title

style: SnackBarStyle.classic

2. Frosted Glass #

Modern glassmorphism effect

style: SnackBarStyle.frosted

3. Minimal #

Clean design with left border accent

style: SnackBarStyle.minimal

4. Gradient #

Beautiful gradient background

style: SnackBarStyle.gradient

5. Floating #

Elevated with prominent shadow

style: SnackBarStyle.floating

6. Material You #

Google Material Design 3 style

style: SnackBarStyle.material

7. iOS Style #

Apple iOS notification style

style: SnackBarStyle.ios

8. Outlined #

Transparent with colored border

style: SnackBarStyle.outlined

9. Compact #

Single-line minimal space

style: SnackBarStyle.compact

10. Expanded #

Large with action button support

style: SnackBarStyle.expanded

11. Icon Only #

Just the icon, no text container

style: SnackBarStyle.iconOnly

12. Neon Glow #

Glowing neon effect

style: SnackBarStyle.neon

13. Neumorphic #

Soft 3D neumorphic design

style: SnackBarStyle.neumorphic

14. Card #

Material card with elevation

style: SnackBarStyle.card

15. Pill #

Rounded pill shape

style: SnackBarStyle.pill

16. Banner #

Full-width banner style

style: SnackBarStyle.banner

17. Grunge #

Bold textured appearance

style: SnackBarStyle.grunge

18. Bubble #

Chat bubble with tail

style: SnackBarStyle.bubble

19. Striped #

Diagonal stripe pattern

style: SnackBarStyle.stripe

20. Pixel Art #

Retro pixel game style

style: SnackBarStyle.pixel

21. Glass #

Advanced glassmorphism

style: SnackBarStyle.glass

22. 3D Effect #

Three-dimensional shadow

style: SnackBarStyle.threeDimensional

23. Dotted #

Polka dot pattern

style: SnackBarStyle.dotted

24. Diagonal Cut #

Angular diagonal edges

style: SnackBarStyle.diagonal

🎯 Types #

Choose from 10 predefined types, each with its own color and icon:

SnackBarType.success   // Green - Checkmark
SnackBarType.error     // Red - Error icon
SnackBarType.warning   // Orange - Warning icon
SnackBarType.info      // Blue - Info icon
SnackBarType.primary   // Purple - Star icon
SnackBarType.secondary // Gray - Notification icon
SnackBarType.dark      // Dark gray - Dark mode icon
SnackBarType.light     // Light gray - Light mode icon
SnackBarType.gradient  // Purple gradient - Gradient icon
SnackBarType.custom    // Blue - Custom widget icon

📍 Positioning #

SnackBarPosition.top     // Display at top of screen
SnackBarPosition.bottom  // Display at bottom of screen (default)

⚙️ Parameters #

🎛️ Advanced Features #

Single Snackbar at a Time #

By default, only one snackbar is shown at a time. When you show a new snackbar, the previous one is automatically removed:

// Default behavior - replaces existing snackbar
CustomSnackBar.show(
  context: context,
  message: 'First message',
);

// This will replace the first one
CustomSnackBar.show(
  context: context,
  message: 'Second message',
);

To allow multiple snackbars at once:

CustomSnackBar.show(
  context: context,
  message: 'First message',
  replaceExisting: false, // Allow multiple
);

CustomSnackBar.show(
  context: context,
  message: 'Second message',
  replaceExisting: false, // Both will show
);

Manually Dismiss Snackbar #

// Show a snackbar
CustomSnackBar.show(
  context: context,
  message: 'Loading...',
);

// Dismiss it programmatically
CustomSnackBar.dismiss();

| customIcon | IconData? | null | Custom icon (overrides type icon) | | customColor | Color? | null | Custom color (overrides type color) | | onTap | VoidCallback? | null | Callback when snackbar is tapped | | actionLabel | String? | null | Label for action button | | onActionPressed | VoidCallback? | null | Callback for action button | | dismissible | bool | true | Allow swipe to dismiss | | width | double? | null | Custom width (uses screen width if null) | | margin | EdgeInsets? | null | Custom margin |

📋 Examples #

Success Message #

CustomSnackBar.show(
  context: context,
  message: 'Changes saved successfully!',
  type: SnackBarType.success,
  style: SnackBarStyle.gradient,
);

Error with Action #

CustomSnackBar.show(
  context: context,
  message: 'Failed to upload file',
  type: SnackBarType.error,
  style: SnackBarStyle.expanded,
  actionLabel: 'RETRY',
  onActionPressed: () {
    // Retry upload logic
  },
);

Warning at Top #

CustomSnackBar.show(
  context: context,
  message: 'Please check your internet connection',
  type: SnackBarType.warning,
  style: SnackBarStyle.ios,
  position: SnackBarPosition.top,
);

Custom Style #

CustomSnackBar.show(
  context: context,
  message: 'You have a new message!',
  style: SnackBarStyle.bubble,
  customColor: Colors.deepPurple,
  customIcon: Icons.mail_rounded,
  title: 'New Message',
);

Compact Notification #

CustomSnackBar.show(
  context: context,
  message: 'Copied to clipboard',
  style: SnackBarStyle.compact,
  type: SnackBarType.info,
  duration: const Duration(seconds: 2),
);

🎮 Running the Example #

To see all 24 styles in action:

cd example
flutter run

The example app includes:

• Live preview of all 24 styles
• Interactive controls to switch between types
• Toggle between top/bottom positions
• Grid view with descriptions

🤝 Contributing #

Contributions are welcome! If you have ideas for new styles or improvements:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

💡 Tips #

• Use SnackBarStyle.compact for quick, non-intrusive messages
• Use SnackBarStyle.expanded when you need action buttons
• Use SnackBarStyle.ios for a native iOS feel
• Use SnackBarStyle.material for Material Design 3 apps
• Use SnackBarStyle.neon or SnackBarStyle.glass for modern, eye-catching effects
• Combine different types and styles for maximum customization

🐛 Issues #

If you encounter any issues or have suggestions, please file them in the issue tracker.

⭐ Show Your Support #

If you like this package, please give it a ⭐ on GitHub!

Made with ❤️ using Flutter