Hyper Snackbar 🚀 #

A highly customizable, animated, and stackable snackbar manager for Flutter. Designed for modern apps that need more than just a simple toast.

✨ Features #

• Stackable: Display multiple notifications simultaneously without overlap.
• Highly Customizable: Custom borders, margins, fonts, shadows, and animations.
• Flexible Action Placement: Align action buttons to the Right, Center, or Left.
• Custom Content Support: Embed any widget (e.g., multiple buttons, sliders) instead of a standard action.
• Smart Updates: Update the content of an existing snackbar by ID without animation glitches.
• Overflow Safety: Automatically handles ultra-long text with internal scrolling, preventing UI overflow errors.
• Persistent Mode: Set duration to Duration.zero (or null) to keep the snackbar visible until dismissed.
• Log Style: Option to append new notifications to the bottom of the list (console log style).
• Presets: Ready-to-use methods for Success, Error, Warning, and Info.
• Polished UI: Supports bold action text, custom colors, and top-aligned close buttons for a modern look.

📦 Installation #

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

dependencies:
  hyper_snackbar: ^0.3.1

🚀 Setup (Important) #

To use HyperSnackbar from anywhere in your code (e.g., ViewModels, BLoCs), you must register the navigatorKey in your MaterialApp.

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(
      title: 'My App',
      // ▼ Register the key here to show snackbars without BuildContext
      navigatorKey: HyperSnackbar.navigatorKey, 
      home: const HomePage(),
    );
  }
}

💡 Usage #

Basic Usage #

The API is static, so you can call it directly without creating an instance.

HyperSnackbar.show(
  title: 'Success!',
  message: 'Data has been saved successfully.',
  backgroundColor: Colors.green,
);

Action Alignment (Right / Center / Left) 🆕 #

You can now control the position of the action button.

// Center Alignment
HyperSnackbar.show(
  title: 'Update Available',
  action: HyperSnackAction(
    label: 'INSTALL',
    onPressed: () => installUpdate(),
  ),
  actionAlignment: MainAxisAlignment.center, // <--- Center the button
);

Custom Content (Arbitrary Widget) 🆕 #

Need more than one button? Use content to pass any widget.

HyperSnackbar.show(
  title: 'Delete this item?',
  message: 'This action cannot be undone.',
  // Embed your own widget
  content: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      TextButton(
        onPressed: () => HyperSnackbar.dismissById('delete_confirm'),
        child: Text('CANCEL', style: TextStyle(color: Colors.white)),
      ),
      SizedBox(width: 8),
      ElevatedButton(
        onPressed: () => deleteItem(),
        child: Text('DELETE'),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
      ),
    ],
  ),
  id: 'delete_confirm',
);

Presets #

Simple one-liners for common scenarios.

// Success
HyperSnackbar.showSuccess(title: 'Saved successfully');

// Error
HyperSnackbar.showError(
  title: 'Connection Failed', 
  message: 'Please check your internet connection.'
);

// Warning
HyperSnackbar.showWarning(title: 'Low Storage');

// Info
HyperSnackbar.showInfo(title: 'New Message Received');

Update by ID (Loading -> Done) ⚡ #

Update the state of a snackbar by providing a unique id.

const String processId = 'upload_process';

// 1. Show Loading state
HyperSnackbar.show(
  id: processId,
  title: 'Uploading...',
  displayDuration: null, // Keep it visible
  icon: CircularProgressIndicator(color: Colors.white),
);

// ... do some work ...

// 2. Update to "Done" state (using the same ID)
HyperSnackbar.show(
  id: processId, // Replaces the content
  title: 'Upload Complete!',
  backgroundColor: Colors.green,
  icon: Icon(Icons.check_circle, color: Colors.white),
  displayDuration: Duration(seconds: 3), // Auto-dismiss
);

Advanced Usage #

Persistent Notification

Set displayDuration to Duration.zero (or null) to make the snackbar stay until manually dismissed.

HyperSnackbar.show(
  title: 'Persistent Message',
  message: 'I will stay here until you close me.',
  displayDuration: Duration.zero, // <--- Persistent
);

Handling Long Text (Overflow Safety)

Even with maxLines: null, the snackbar will safely handle extremely long text by enabling internal scrolling, ensuring it never exceeds the screen height.

HyperSnackbar.show(
  title: 'System Log',
  message: 'Very long error log...\nLine 1\nLine 2\n...',
  maxLines: null, // Unlimited lines (scrollable if needed)
  backgroundColor: Colors.grey[900],
);

Using with GoRouter #

If you are using go_router, simply assign HyperSnackbar.navigatorKey to the navigatorKey property.

final _router = GoRouter(
  navigatorKey: HyperSnackbar.navigatorKey, // Add this line
  routes: [ ... ],
);

⚙️ Configuration (HyperConfig) #

❤️ Contributing #

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

📄 License #

MIT License