SnackBar Pro #

A beautiful Flutter package that provides animated snackbars with expanding container, custom person figure (drawn or image), and typing text animation.

A product of Alpha Kraft

Features #

✨ Expanding Container Animation - Container expands smoothly from left to right
👤 Flexible Person Figure - Use custom PNG images or default drawn figure
🖼️ Custom Image Support - Support for asset images, network images, and more
⌨️ Typing Animation - Text appears with realistic typing effect and cursor
🎨 Highly Customizable - Colors, durations, styling, and behavior
📱 Responsive Design - Adapts to different screen sizes
🚀 Easy to Use - Simple API with sensible defaults

Demo #

1. Default SnackBar Pro #

2. Custom Styled #

3. Custom Image (Asset) #

4. Network Image #

5. No Person Figure #

6. Long Message #

Installation #

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

dependencies:
  snackbar_pro: ^1.0.0

Then run:

flutter pub get

Usage #

Basic Usage #

import 'package:snackbar_pro/snackbar_pro.dart';

// Show a simple SnackBar Pro
SnackBarPro.show(
  context,
  config: SnackBarProConfig(
    message: "Hello! This is SnackBar Pro.",
  ),
);

Using Custom PNG Image #

// Using asset image
SnackBarPro.show(
  context,
  config: SnackBarProConfig(
    message: "Custom avatar SnackBar!",
    personImage: AssetImage('assets/images/avatar.png'),
    personSize: Size(60, 80),
    personImageFit: BoxFit.cover,
    personImageBorderRadius: BorderRadius.circular(12),
  ),
);

// Using network image
SnackBarPro.show(
  context,
  config: SnackBarProConfig(
    message: "Network image SnackBar!",
    personImage: NetworkImage('https://example.com/avatar.png'),
    personSize: Size(55, 75),
  ),
);

Custom Configuration #

SnackBarPro.show(
  context,
  config: SnackBarProConfig(
    message: "Custom styled SnackBar Pro!",
    gradientColors: [Colors.orange, Colors.deepOrange],
    typingSpeed: 60,
    containerAnimationDuration: Duration(milliseconds: 1200),
    personFillColor: Colors.yellow,
    personStrokeColor: Colors.red,
    textStyle: TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
  ),
  duration: Duration(seconds: 8),
);

Without Person Figure #

SnackBarPro.show(
  context,
  config: SnackBarProConfig(
    message: "SnackBar without person figure",
    showPersonFigure: false,
    gradientColors: [Colors.teal, Colors.cyan],
  ),
);

Configuration Options #

SnackBarProConfig Parameters #

SnackBarPro.show() Parameters #

Custom Image Support #

Supported Image Types #

• Asset Images: AssetImage('assets/images/avatar.png')
• Network Images: NetworkImage('https://example.com/avatar.png')
• File Images: FileImage(File('path/to/image.png'))
• Memory Images: MemoryImage(uint8list)

Image Configuration #

SnackBarProConfig(
  message: "Your message here",
  personImage: AssetImage('assets/avatar.png'),
  personSize: Size(60, 80),                    // Custom size
  personImageFit: BoxFit.cover,                // How to fit the image
  personImageBorderRadius: BorderRadius.circular(10), // Rounded corners
)

Error Handling #

If a custom image fails to load, the widget automatically falls back to the default drawn person figure using the personFillColor and personStrokeColor properties.

Animation Sequence #

1. Container Expansion (1000ms default) - Container expands from collapsed to full width
2. Person Figure (400ms default) - Person figure (image or drawn) scales in with elastic animation
3. Typing Animation (80ms per character default) - Text types out with cursor
4. Cursor Fade (1000ms after completion) - Cursor disappears smoothly

Examples #

Basic Examples #

// Default drawn person
SnackBarPro.show(context, 
  config: SnackBarProConfig(message: "Hello World!"));

// Custom asset image
SnackBarPro.show(context, 
  config: SnackBarProConfig(
    message: "Custom avatar!",
    personImage: AssetImage('assets/avatar.png'),
  ));

// Network image with custom styling
SnackBarPro.show(context, 
  config: SnackBarProConfig(
    message: "Network avatar!",
    personImage: NetworkImage('https://example.com/avatar.png'),
    gradientColors: [Colors.blue, Colors.indigo],
    personImageBorderRadius: BorderRadius.circular(15),
    personSize: Size(65, 85),
  ));

Asset Setup #

To use asset images, add them to your pubspec.yaml:

flutter:
  assets:
    - assets/images/
    - assets/avatars/

Best Practices #

Image Recommendations #

• Size: Recommended image size is 50x70 to 80x100 pixels
• Format: PNG with transparency works best
• Aspect Ratio: Portrait orientation (taller than wide) looks most natural
• File Size: Keep images under 100KB for better performance

Performance Tips #

• Use AssetImage for frequently used images
• Consider image caching for NetworkImage
• Optimize PNG files before adding to assets
• Use appropriate personImageFit values:
  • BoxFit.cover - Fills the space, may crop image
  • BoxFit.contain - Shows entire image, may have empty space
  • BoxFit.fill - Stretches image to fill space

Migration Guide #

From v1.0.0 to v1.1.0 #

The new image feature is backward compatible. Existing code will continue to work without changes.

To add custom images to existing implementations:

// Old way (still works)
SnackBarProConfig(
  message: "Hello",
  personFillColor: Colors.blue,
  personStrokeColor: Colors.white,
)

// New way with custom image
SnackBarProConfig(
  message: "Hello",
  personImage: AssetImage('assets/avatar.png'),
  // personFillColor and personStrokeColor are used as fallback
  personFillColor: Colors.blue,
  personStrokeColor: Colors.white,
)

Troubleshooting #

Common Issues #

Image not showing:

• Verify the image path in pubspec.yaml
• Check if the image file exists in the specified location
• Ensure the image format is supported (PNG, JPG, GIF, WebP)

Image appears distorted:

• Adjust the personImageFit property
• Check the personSize dimensions
• Verify the original image aspect ratio

Network image fails to load:

• Check internet connectivity
• Verify the image URL is accessible
• The widget will automatically fallback to drawn person

Performance issues:

• Optimize image file sizes
• Use appropriate image dimensions
• Consider using AssetImage for local images

Screenshots #

Advanced Usage #

Dynamic Image Loading #

ImageProvider getPersonImage(String userType) {
  switch (userType) {
    case 'admin':
      return AssetImage('assets/admin_avatar.png');
    case 'user':
      return AssetImage('assets/user_avatar.png');
    default:
      return AssetImage('assets/default_avatar.png');
  }
}

SnackBarPro.show(context, 
  config: SnackBarProConfig(
    message: "Welcome back!",
    personImage: getPersonImage(currentUser.type),
  ));

Conditional Person Figure #

SnackBarPro.show(context, 
  config: SnackBarProConfig(
    message: notification.message,
    personImage: notification.hasAvatar 
      ? NetworkImage(notification.avatarUrl) 
      : null,
    showPersonFigure: notification.showAvatar,
  ));

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup #

1. Fork the repository
2. Create a feature branch
3. Add your changes with tests
4. Update documentation
5. Submit a pull request

License #

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

Changelog #

v1.1.0 #

• ✨ Added custom PNG image support for person figure
• 🎨 Added personImage, personSize, personImageFit, and personImageBorderRadius properties
• 🔧 Improved error handling with automatic fallback to drawn person
• 📚 Updated documentation and examples

v1.0.0 #

• 🎉 Initial release
• ✨ Expanding container animation
• 👤 Drawn person figure
• ⌨️ Typing text animation
• 🎨 Customizable styling

Support #

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

Issues #

Please file issues on the GitHub issue tracker.