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 snackbar - Green background with checkmark icon
SnackbarX.showSuccess('Operation completed successfully!');

// Error snackbar - Red background with error icon  
SnackbarX.showError('Something went wrong!');

// Info snackbar - Blue background with info icon
SnackbarX.showInfo('Here is some useful information');

Visual appearance:

• Success: Green background (#4CAF50) with white checkmark icon
• Error: Red background (#F44336) with white error icon
• Info: Blue background (#2196F3) with white info icon

Installation #

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

dependencies:
  snackbarx: ^1.0.0

Then run:

flutter pub get

Quick Start #

1. Simple Setup (One-time) #

Add the navigator key to your MaterialApp and initialize in main:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize SnackbarX once at app startup
  SnackbarX.init();
  
  runApp(MyApp());
}

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // Show snackbar from anywhere - no context needed!
        SnackbarX.showSuccess('Operation completed successfully!');
      },
      child: Text('Show Success'),
    );
  }
}

2. Usage Examples #

After setup, use SnackbarX anywhere in your app:

// Success message
SnackbarX.showSuccess('File saved successfully!');

// Error message
SnackbarX.showError('Connection failed');

// Info message
SnackbarX.showInfo('Update available');

// Use from any function, even without widgets
void saveData() {
  // ... save logic
  SnackbarX.showSuccess('Data saved!');
}

3. Alternative: Context-Based Usage #

If you prefer not to use global setup, you can pass context directly:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        SnackbarX.showSuccess(
          'Operation completed!',
          context: context, // Pass context directly
        );
      },
      child: Text('Show Success'),
    );
  }
}

Advanced Usage #

Custom Configuration #

Customize the appearance and behavior of your snackbars:

SnackbarX.showSuccess(
  'Custom styled message',
  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',
  config: SnackbarConfig(
    actionLabel: 'RETRY',
    onActionPressed: () {
      // Handle retry logic
      print('Retrying...');
    },
    showCloseButton: true,
  ),
);

Different Positions #

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

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

// Bottom position (default)
SnackbarX.showInfo('Message at the bottom');

Animation Types #

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

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

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

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

Configuration Options #

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, // Required for global access
  home: MyHomePage(),
)

Package not working:

// Ensure you import the package
import 'package:snackbarx/snackbarx.dart';

// Use the simple API
SnackbarX.showSuccess('Your message here');

Want smoother animations?

// Pass a TickerProvider when available
class _MyPageState extends State<MyPage> with TickerProviderStateMixin {
  void showMessage() {
    SnackbarX.showSuccess(
      'Message with smooth animation',
      tickerProvider: this,
    );
  }
}

Best Practices #

1. Add navigator key: Required in MaterialApp for global access
2. Keep messages short: Concise text works best
3. Use appropriate types: Match success/error/info to context
4. Optional ticker provider: Only add if you want extra smooth animations
5. No initialization needed: Package auto-initializes on first use

Example #

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

Contributing #

We welcome contributions! Here's how you can help:

• 🐛 Report bugs using our bug report template
• 💡 Request features using our feature request template
• ❓ Ask questions using our question template
• 📝 Improve documentation by submitting pull requests
• 🔧 Submit code changes following our guidelines

Please read our Contributing Guide for detailed information about development setup, coding standards, and the pull request process.

Issues and Support #

Reporting Issues #

Before creating a new issue, please:

1. Search existing issues to avoid duplicates
2. Check the documentation and troubleshooting section
3. Use the appropriate issue template:
   • Bug Report - For bugs and unexpected behavior
   • Feature Request - For new feature suggestions
   • Question - For usage help and questions

Getting Help #

• 📖 Read the documentation and API reference
• 🔍 Check existing issues and discussions
• 💬 Join GitHub Discussions for community help
• ❓ Create a question issue if you need specific help

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 the Project #

If you find SnackbarX helpful:

• ⭐ Star the repository on GitHub
• 👍 Like the package on pub.flutter-io.cn
• 📢 Share it with other developers
• 🤝 Contribute to the project

Your support helps maintain and improve SnackbarX for everyone!