multi_mode_animated_snack 0.0.2

A customizable and multi-mode animated snackbar for Flutter.

Perfect for:

• Global notifications
• Deep links
• Lightweight snackbars

Table of Contents

• Features
• Installation
• Quick Start 🚀
• Advanced Usage ⚙️ (Optional)
• Contact

Preview

[Demo]

Multi-mode Animated Snack

A simple and elegant top snackbar for Flutter that animates beautifully and does not require context every time — just once during initialization.

Perfect for global notifications, deep links, and lightweight snackbars.

Features

• ✅ Easy to use
• ✅ No need to pass context every time
• ✅ Customizable appearance (top or bottom)
• ✅ Beautiful entrance and exit animations
• ✅ Tappable actions (deep links or navigation)
• ✅ Optional underlined text inside the snackbar
• ✅ Auto-dismiss after 5 seconds
• ✅ Manual dismiss support
• ✅ Swipe up to dismiss
• ✅ Haptic feedback when shown
• ✅ Custom configurations for different snack types (error, warning, success, etc.)
• ✅ Custom padding and margins for fine-tuned layout

Installation

Add the dependency in your pubspec.yaml:

dependencies:
  multi_mode_animated_snack: <latest_version>

Quick Start 🚀

Step 1: Initialize once in your MaterialApp builder

// Add this to your app's MaterialApp:
builder: (context, child) {
  return Overlay(
    initialEntries: [
      OverlayEntry(
        builder: (context) {
          AnimatedSnackBar.initialize(
            context,
            appearanceMode: AppearanceMode.bottom, // or AppearanceMode.top
          );
          return child!;
        },
      ),
    ],
  );
}

// Or, use a cleaner approach:
builder: (context, child) => OverlayWrapper(
  sneckInitializer: (context) => AnimatedSnackBar.initialize(
    context,
    appearanceMode: AppearanceMode.bottom,
  ),
  child: child,
),

Step 2: Show snackbars anywhere in your app

AnimatedSnackBar.show('Your message here');

Step 3: (Optional) Add settings per message

AnimatedSnackBar.show(
  message: 'Test snackbar',
  configMode: ConfigMode.error,
  contentPadding: 10,
  textColor: Colors.amber, // or custom textStyle
  backgroundColor: Colors.black,
  underliningPart: 'click here',
  underlineColor: Colors.red,
  borderRadius: 100,
  underliningPartColor: Colors.teal
  deepLinkTransition: () {
    // Handle tap, e.g., navigate
  },
);

Advanced Usage ⚙️ (Optional)

• Note: you need to perform a hot restart for the changes to take effect.

Add custom configurations during initialization

If you want to fully customize different snack types (error, success, warning, common), add them during initialization:

AnimatedSnackBar.initialize(
  context,
  appearanceMode: AppearanceMode.top, // Custom appearance mode
  common: CommonSnack(),
  error: ErrorSnack(),
  success: SuccessSnack(),
  warning: WarningSnack(),
);

Define your custom configurations:

class ErrorSnack extends BaseSnackBarConfig {
  ErrorSnack({
    // these parameters should be provided each time you show the snackbar
    super.message,
    super.deepLinkTransition,
  }) : super(
          // default settings for the error snack
        backgroundColor: Colors.red.withOpacity(0.96),
          textStyle: const TextStyle(
            color: Colors.yellow,
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
          underliningPart: 'click here',
          underliningPartColor: Colors.teal,
          contentPadding: 16,
          // others
        );
}

class WarningSnack extends BaseSnackBarConfig {
  WarningSnack({
    // these can be overridden at show-time
    super.message,
    super.underliningPart,
    super.deepLinkTransition,
    super.textColor,
  }) : super(
    // fixed background color for warnings
    backgroundColor: Colors.yellow.withOpacity(0.96),
  );
}

// Repeat for others.

Use it like this:

AnimatedSnackBar.show(
  message: 'Something went wrong!',
  configMode: ConfigMode.error,
);

Customization

• Position: Top or Bottom via appearanceMode

• Text Style: Custom font, size, color, weight

• Background Color: Custom background color or gradient

• Underlined Part: Text and color

• Content Padding: Adjust inner padding (contentPadding)

• Dismiss Duration: Auto-dismiss timing (currently defaults to 5 seconds)

• Haptic Feedback: Enabled by default

• Swipe to Dismiss: Enabled by default

• Actions: Add deepLinkTransition for tappable actions

License

MIT License. Free to use and modify.

Contact

If you want to report a bug, request a feature or improve something, feel free to file an issue in the GitHub repository.