HyperSnackbar 🚀 #

A highly customizable, animated, and powerful snackbar package for Flutter. Designed to be "Hyper" flexible — supports Stack/Queue modes, custom animations (Scale, Slide, Fade), progress bars, and highly interactive actions.

Now with Presets and GetX-style aliases for easier migration!

👉 Try the Interactive Playground!

✨ Features #

• Flexible Positioning: Top or Bottom.
• Display Modes: Stack (overlay) or Queue (sequential).
• Rich Animations: Slide, Fade, and New! Scale (Elastic Zoom).
• Presets System: Define reusable styles and inherit/override them easily.
• Progress Bar: Line or Wipe effects.
• Interactive: Tap callbacks, Action buttons, and Dismissible swipes.
• GetX Migration Aids: Supports parameters like duration, snackPosition, and colorText.
• No Context Required: Uses NavigatorKey for easy calling from anywhere.

🚀 Installation #

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

dependencies:
  hyper_snackbar: ^0.8.0

🛠 Setup #

Register the navigatorKey in your MaterialApp to show snackbars without a BuildContext.

import 'package:hyper_snackbar/hyper_snackbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Important: Register the key here to show snackbars without BuildContext
      navigatorKey: HyperSnackbar.navigatorKey, 
      home: const HomePage(),
    );
  }
}

📖 Usage #

Basic Usage #

The simplest way to show a message.

HyperSnackbar.show(
  title: 'Hello World',
  message: 'This is the simplest usage.',
);

Built-in Presets #

Quickly show styled messages for common scenarios.

// Success
HyperSnackbar.showSuccess(
  title: 'Success!',
  message: 'Operation completed successfully.',
);

// Error
HyperSnackbar.showError(
  title: 'Error',
  message: 'Something went wrong.',
);

// Warning & Info
HyperSnackbar.showWarning(title: 'Low Storage');
HyperSnackbar.showInfo(title: 'New Message');

🎨 Creating Custom Presets (New!) #

Stop repeating yourself! Define reusable styles using HyperSnackbar.preset and reuse them across your app.

// 1. Define a base preset (e.g., in your constants file)
static final myBrandPreset = HyperSnackbar.preset(
  backgroundColor: Colors.deepPurple,
  icon: Icon(Icons.star, color: Colors.amber),
  borderRadius: 16,
  animationType: HyperSnackAnimationType.scale, // Sets both enter & exit
);

// 2. Use it anywhere
HyperSnackbar.show(
  title: 'Welcome!',
  preset: myBrandPreset,
);

// 3. Override specific properties on the fly
HyperSnackbar.show(
  title: 'Welcome!',
  preset: myBrandPreset,
  backgroundColor: Colors.red, // Overrides the purple color
);

You can even inherit and extend presets using copyWith:

final darkPreset = myBrandPreset.copyWith(
  backgroundColor: Colors.black,
  textColor: Colors.white,
);

🖥️ Web & Desktop Layout (New!) #

The default full-width design is perfect for mobile, but it can stretch too far on large screens. You can now easily constrain the width and align the snackbar for Web and Desktop layouts.

HyperSnackbar.show(
  message: 'This is a compact notification.',
  maxWidth: 400.0, // Prevents stretching on large screens
  alignment: Alignment.centerRight, // Aligns to the right side of the window
  showCloseButton: false, // Optional: create a clean, message-only toast
);

By keeping the type as AlignmentGeometry, it fully supports center, centerLeft, centerRight, and even RTL (Right-to-Left) layouts using AlignmentDirectional.

⚡ GetX Migration Guide #

Coming from GetX? HyperSnackbar now supports familiar parameter aliases to assist with migration.

// You can use GetX-style parameters directly:
HyperSnackbar.show(
  title: 'Familiar?',
  message: 'It works just like you expect.',
  snackPosition: HyperSnackPosition.bottom, // Alias for position
  duration: Duration(seconds: 3),           // Alias for displayDuration
  colorText: Colors.white,                  // Alias for textColor
);

Advanced Features #

Progress Bar Effects

Visualize the remaining duration.

HyperSnackbar.show(
  title: 'Loading...',
  progressBarWidth: 4.0, // Line effect
  // progressBarWidth: 0.0, // Wipe effect (background fill)
  displayDuration: const Duration(seconds: 5),
);

Action Button & Custom Content

Add interactive buttons or fully custom widgets.

HyperSnackbar.show(
  title: 'Item Deleted',
  action: HyperSnackAction(
    label: 'UNDO',
    onPressed: () => undoAction(),
  ),
);

// Or use a custom widget
HyperSnackbar.show(
  title: 'Cart Updated',
  content: Row(
    children: [
      TextButton(onPressed: () {}, child: Text('View Cart')),
      TextButton(onPressed: () {}, child: Text('Checkout')),
    ],
  ),
);

Overlay Control (Embedded Mode)

By default, snackbars render on the root overlay (covering modals). Set useLocalOverlay: true to render inside the nearest active Navigator (e.g., inside a tab or bottom sheet).

HyperSnackbar.show(
  title: 'Embedded Message',
  useLocalOverlay: true, 
  backgroundColor: Colors.indigo,
);

📚 API Reference #

HyperSnackbar Methods #

All methods are static and can be called from anywhere.

⚙️ Configuration Parameters #

HyperSnackbar is highly customizable. You can configure it using the HyperConfig object, HyperSnackbar.preset, or directly via parameters in HyperSnackbar.show.

🎨 General & Appearance #

👆 Actions & Interaction #

⏱️ Behavior & Positioning #

📝 Text Handling #

✨ Animation #

📊 Progress Bar #

📄 License #

MIT License