SnackbarX

A lightweight, customizable Flutter package for displaying themed snackbars anywhere in your app without requiring BuildContext.

Features

• 🎨 Multiple themes: Success, error, and info variants with predefined colors and icons
• 🎯 Flexible positioning: Show snackbars at top, center, or bottom of screen
• ✨ Rich animations: Multiple animation types including slide, fade, scale, and combined effects
• 🎛️ Highly customizable: Override colors, icons, padding, margins, and more
• 🔧 Interactive elements: Support for action buttons and close buttons
• 🚀 Easy to use: No BuildContext required after initial setup
• 💾 Memory efficient: Proper resource management and cleanup
• 📱 Safe area aware: Respects device notches and system UI

Preview

Success	Error	Info

Installation

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

dependencies:
  snackbarx: ^1.0.0

Then run:

flutter pub get

Quick Start

1. Setup

First, add the navigator key to your MaterialApp and initialize SnackbarX:

import 'package:flutter/material.dart';
import 'package:snackbarx/snackbarx.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      navigatorKey: SnackbarX.navigatorKey, // Add this line
      home: HomePage(),
    );
  }
}

2. Initialize in your main widget

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
    // Initialize SnackbarX
    SnackbarX.init(
      navigatorKey: SnackbarX.navigatorKey,
      tickerProvider: this,
    );
  }
  
  // Your widget code here
}

3. Show snackbars

// Success message
SnackbarX.showSuccess(
  'Operation completed successfully!',
  context: context,
  tickerProvider: this,
);

// Error message
SnackbarX.showError(
  'Something went wrong!',
  context: context,
  tickerProvider: this,
);

// Info message
SnackbarX.showInfo(
  'Here is some useful information',
  context: context,
  tickerProvider: this,
);

Advanced Usage

Custom Configuration

Customize the appearance and behavior of your snackbars:

SnackbarX.showSuccess(
  'Custom styled message',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(
    position: SnackbarPosition.top,
    duration: Duration(seconds: 5),
    backgroundColor: Colors.deepPurple,
    textColor: Colors.white,
    icon: Icons.star,
    iconColor: Colors.amber,
    borderRadius: BorderRadius.circular(20),
    showCloseButton: true,
    animationType: SnackbarAnimationType.scale,
  ),
);

Action Buttons

Add interactive action buttons to your snackbars:

SnackbarX.showError(
  'Connection failed',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(
    actionLabel: 'RETRY',
    onActionPressed: () {
      // Handle retry logic
      print('Retrying...');
    },
    showCloseButton: true,
  ),
);

Different Positions

// Top position
SnackbarX.showInfo(
  'Message at the top',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(position: SnackbarPosition.top),
);

// Center position
SnackbarX.showInfo(
  'Message in the center',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(position: SnackbarPosition.center),
);

// Bottom position (default)
SnackbarX.showInfo(
  'Message at the bottom',
  context: context,
  tickerProvider: this,
);

Animation Types

// Slide animation
SnackbarX.showSuccess(
  'Slides in smoothly',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(animationType: SnackbarAnimationType.slideUp),
);

// Fade animation
SnackbarX.showSuccess(
  'Fades in gently',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(animationType: SnackbarAnimationType.fade),
);

// Scale animation
SnackbarX.showSuccess(
  'Pops in with style',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(animationType: SnackbarAnimationType.scale),
);

// Combined slide and fade
SnackbarX.showSuccess(
  'Best of both worlds',
  context: context,
  tickerProvider: this,
  config: SnackbarConfig(animationType: SnackbarAnimationType.slideAndFade),
);

Configuration Options

Property	Type	Default	Description
duration	Duration	Duration(seconds: 3)	How long the snackbar stays visible
position	SnackbarPosition	SnackbarPosition.bottom	Position on screen (top/center/bottom)
backgroundColor	Color?	null	Custom background color
textColor	Color?	null	Custom text color
icon	IconData?	null	Custom icon
iconColor	Color?	null	Custom icon color
actionLabel	String?	null	Text for action button
onActionPressed	VoidCallback?	null	Action button callback
actionTextColor	Color?	null	Action button text color
borderRadius	BorderRadius	BorderRadius.circular(8)	Corner radius
padding	EdgeInsets	EdgeInsets.symmetric(horizontal: 16, vertical: 12)	Internal padding
margin	EdgeInsets	EdgeInsets.all(16)	External margin
animationDuration	Duration	Duration(milliseconds: 250)	Animation speed
maxWidth	double?	600	Maximum width
minWidth	double?	null	Minimum width
elevation	double	6	Shadow elevation
showCloseButton	bool	false	Show close button
animationType	SnackbarAnimationType	slideUp	Animation style

Enums

SnackbarPosition

• SnackbarPosition.top - Display at top of screen
• SnackbarPosition.center - Display in center of screen
• SnackbarPosition.bottom - Display at bottom of screen

SnackbarAnimationType

• SnackbarAnimationType.slideUp - Slide from edge
• SnackbarAnimationType.fade - Fade in/out
• SnackbarAnimationType.scale - Scale up/down
• SnackbarAnimationType.slideAndFade - Combined effect

SnackbarType

• SnackbarType.success - Green themed success messages
• SnackbarType.error - Red themed error messages
• SnackbarType.info - Blue themed informational messages

API Reference

SnackbarX

Static Methods

showSuccess(String message, {...})

Shows a success-themed snackbar with green background and checkmark icon.

showError(String message, {...})

Shows an error-themed snackbar with red background and error icon.

showInfo(String message, {...})

Shows an info-themed snackbar with blue background and info icon.

show(String message, SnackbarType type, {...})

Shows a snackbar with specified type and configuration.

init({GlobalKey<NavigatorState>? navigatorKey, TickerProvider? tickerProvider})

Initializes the snackbar system. Must be called before showing snackbars.

dismiss()

Dismisses any currently visible snackbar.

Properties

navigatorKey

Global navigator key for accessing the overlay. Add this to your MaterialApp.

Troubleshooting

Common Issues

"No Overlay found" error:

// Make sure you added the navigator key to MaterialApp
MaterialApp(
  navigatorKey: SnackbarX.navigatorKey, // Don't forget this!
  home: MyHomePage(),
)

"SnackbarX not initialized" error:

// Call init() in your widget's initState
@override
void initState() {
  super.initState();
  SnackbarX.init(tickerProvider: this);
}

Animations not working:

// Make sure your State class uses TickerProviderStateMixin
class _MyPageState extends State<MyPage> with TickerProviderStateMixin {
  // Your code here
}

Best Practices

1. Always initialize: Call SnackbarX.init() before showing snackbars
2. Use TickerProviderStateMixin: For smooth animations
3. Provide context and tickerProvider: For best reliability
4. Keep messages concise: Short, clear messages work best
5. Use appropriate types: Match the message type to its content

Example

Check out the example folder for a complete working implementation showing all features.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a detailed list of changes and updates.

Support

If you like this package, please give it a ⭐ on GitHub and a 👍 on pub.flutter-io.cn!

For questions or issues, please file them on the GitHub Issues page.