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

Default SnackBar

2. Custom Styled

Custom Styled

3. Custom Image (Asset)

Custom Image

4. Network Image

Network Image

5. No Person Figure

No Person Figure

6. Long Message

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

Parameter Type Default Description
message String required The message to display
gradientColors List<Color> [Colors.deepPurple, Colors.purple] Background gradient colors
textStyle TextStyle? null Custom text style
containerAnimationDuration Duration Duration(milliseconds: 1000) Container expansion duration
personAnimationDuration Duration Duration(milliseconds: 400) Person figure animation duration
typingSpeed int 80 Milliseconds between each character
borderRadius BorderRadius BorderRadius.all(Radius.circular(12)) Container border radius
boxShadow List<BoxShadow>? null Custom shadow
showPersonFigure bool true Whether to show person figure
personFillColor Color Colors.white Person figure fill color (drawn figure)
personStrokeColor Color Colors.deepPurple Person figure stroke color (drawn figure)
personImage ImageProvider? null Custom image for person figure
personSize Size Size(50, 70) Size of the person figure
personImageFit BoxFit BoxFit.cover How custom image should fit
personImageBorderRadius BorderRadius? null Border radius for custom image
containerWidthFraction double 0.9 Container width as fraction of screen width
padding EdgeInsets EdgeInsets.all(16) Container padding

SnackBarPro.show() Parameters

Parameter Type Default Description
context BuildContext required Build context
config SnackBarProConfig required Configuration object
duration Duration Duration(seconds: 6) How long to show the snackbar
behavior SnackBarBehavior SnackBarBehavior.floating Snackbar behavior

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

Default Style Custom Asset Image Network Image No Person Figure
Default Asset Network No Person

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.

Libraries

snackbar_pro
SnackBar Pro - Advanced animated snackbar package