floating_snackbar

Beautiful, customizable floating snackbars / toasts for Flutter. 🚀

Keep the dead-simple one-liner you already know - or reach for variants, positioning, theming, actions, progress bars, and context-free display when you need them. Pure Dart, zero native code, works on every platform.

Android	iOS	Linux	macOS	Web	Windows
✅	✅	✅	✅	✅	✅

📸 Screenshots

_{Example app}

_Progress

_{Bottom with title}

_{Top position}

✨ Features

✅ Backward compatible - the original floatingSnackBar() still works.
🎨 Variants - success, error, warning, info, with default colors & icons.
📍 Positioning - show at the top or bottom of the screen.
🧩 Rich content - title + body, leading icon/widget, trailing action button.
⏳ Progress bar - optional countdown indicator.
👆 Dismissal - tap-to-dismiss and swipe-to-dismiss.
🌈 Animations - slide, fade, or scale.
🌍 Global theming - set defaults once via FloatingSnackBar.theme.
🪄 Context-free - show from services/blocs with no BuildContext.

📦 Getting started

Add the dependency:

dependencies:
  floating_snackbar: ^2.0.0

Import it:

import 'package:floating_snackbar/floating_snackbar.dart';

🚀 Usage

The simple one-liner (unchanged)

floatingSnackBar(
  message: 'Hi there! I am a floating SnackBar!',
  context: context,
);

Variants

FloatingSnackBar.success(context, 'Saved successfully!');
FloatingSnackBar.error(context, 'Something went wrong.');
FloatingSnackBar.warning(context, 'Battery is running low.');
FloatingSnackBar.info(context, 'A new update is available.');

Positioning

FloatingSnackBar.success(
  context,
  'Shown at the top!',
  position: FloatingSnackBarPosition.top,
);

Title, action & progress

FloatingSnackBar.show(
  context,
  'Item deleted.',
  title: 'Done',
  position: FloatingSnackBarPosition.bottom,
  showProgress: true,
  duration: const Duration(seconds: 5),
  action: FloatingSnackBarAction(
    label: 'UNDO',
    onPressed: () => restoreItem(),
  ),
);

Custom leading widget & colors

FloatingSnackBar.show(
  context,
  'You earned a new badge!',
  leading: const Icon(Icons.emoji_events, color: Colors.amber),
  backgroundColor: const Color(0xFF311B92),
  animation: FloatingSnackBarAnimation.scale,
);

Context-free (no `BuildContext`)

Wire the navigator key into your app once:

MaterialApp(
  navigatorKey: FloatingSnackBar.navigatorKey,
  // ...
);

Then call from anywhere - a service, a bloc, an interceptor:

FloatingSnackBar.info(null, 'No BuildContext needed!');

Already have a navigator key? Just assign it: FloatingSnackBar.navigatorKey = myExistingKey;

Global theming

Set your defaults once (e.g. in main) and every snackbar follows them:

FloatingSnackBar.theme = const FloatingSnackBarTheme(
  defaultPosition: FloatingSnackBarPosition.top,
  borderRadius: 16,
  duration: Duration(seconds: 3),
  successColor: Colors.teal,
  animation: FloatingSnackBarAnimation.slide,
);

Dismiss programmatically

FloatingSnackBar.dismiss(context); // or dismiss() with the navigatorKey set

📋 API reference