Upper Snackbar #

A beautiful, customizable, and animated snackbar package for Flutter that displays notifications at the top of the screen.

Features #

✨ Easy to Use - Simple API with sensible defaults
🎨 Highly Customizable - Customize colors, icons, borders, gradients, and more
🎯 Predefined Types - Built-in success, error, warning, and info styles
📍 Flexible Positioning - Display at top-center, top-left, or top-right
⚡ Smooth Animations - Beautiful slide-in animations
🎭 Action Buttons - Add optional action buttons
👆 Interactive - Tap to dismiss or trigger callbacks
🎪 Gradient Support - Use gradients for backgrounds
🔧 Full Control - Control duration, dismissibility, and animation speed

Installation #

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

dependencies:
  upper_snackbar: ^0.0.1

Then run:

flutter pub get

Usage #

Basic Usage #

Import the package:

import 'package:upper_snackbar/upper_snackbar.dart';

Show a simple info snackbar:

UpperSnackbar().showInfo(
  context,
  message: 'This is an info message!',
);

Predefined Types #

The package comes with four predefined types:

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

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

// Warning
UpperSnackbar().showWarning(
  context,
  message: 'This action cannot be undone!',
);

// Info
UpperSnackbar().showInfo(
  context,
  message: 'Did you know?',
);

With Action Button #

Add an action button to your snackbar:

UpperSnackbar().showSuccess(
  context,
  message: 'File deleted successfully',
  actionLabel: 'UNDO',
  onActionPressed: () {
    // Handle undo action
    print('Undo pressed!');
  },
);

Different Positions #

Display the snackbar at different positions:

// Top Center (Default)
UpperSnackbar().showInfo(
  context,
  message: 'Centered at top',
  position: SnackbarPosition.top,
);

// Top Left
UpperSnackbar().showInfo(
  context,
  message: 'Top left position',
  position: SnackbarPosition.topLeft,
);

// Top Right
UpperSnackbar().showInfo(
  context,
  message: 'Top right position',
  position: SnackbarPosition.topRight,
);

Custom Styling #

Customize every aspect of the snackbar:

UpperSnackbar().show(
  context,
  message: 'Custom styled snackbar',
  type: SnackbarType.custom,
  style: SnackbarStyle(
    backgroundColor: Colors.pink,
    textColor: Colors.white,
    iconColor: Colors.white,
    icon: Icons.favorite,
    borderRadius: 20.0,
    elevation: 10.0,
  ),
);

With Border #

Add a border to your snackbar:

UpperSnackbar().show(
  context,
  message: 'Snackbar with border',
  type: SnackbarType.custom,
  style: SnackbarStyle(
    backgroundColor: Colors.white,
    textColor: Colors.deepOrange,
    iconColor: Colors.deepOrange,
    icon: Icons.notifications_active,
    border: Border.all(color: Colors.deepOrange, width: 2),
  ),
);

Gradient Background #

Use a gradient for the background:

UpperSnackbar().show(
  context,
  message: 'Beautiful gradient!',
  type: SnackbarType.custom,
  style: const SnackbarStyle(
    gradient: LinearGradient(
      colors: [Colors.purple, Colors.deepPurple, Colors.indigo],
    ),
    textColor: Colors.white,
    iconColor: Colors.white,
    icon: Icons.auto_awesome,
  ),
);

Control Duration #

Set how long the snackbar stays visible:

// Long duration (5 seconds)
UpperSnackbar().showSuccess(
  context,
  message: 'This will stay for 5 seconds',
  duration: 5,
);

// Short duration (1 second)
UpperSnackbar().showError(
  context,
  message: 'Quick message!',
  duration: 1,
);

Animation Speed #

Customize the animation duration:

UpperSnackbar().show(
  context,
  message: 'Slow animation',
  type: SnackbarType.info,
  animationDuration: 800, // milliseconds
);

Non-dismissible Snackbar #

Prevent dismissal by tapping:

UpperSnackbar().show(
  context,
  message: 'Cannot dismiss by tapping',
  type: SnackbarType.error,
  dismissible: false,
  duration: 3,
);

With Tap Callback #

Handle tap events:

UpperSnackbar().showInfo(
  context,
  message: 'Tap me!',
  onTap: () {
    print('Snackbar was tapped!');
  },
);

Hide Programmatically #

Manually hide the snackbar:

// Show snackbar
UpperSnackbar().showInfo(context, message: 'Hello!');

// Hide it manually
UpperSnackbar().hide();

Parameters #

Main Parameters #

SnackbarStyle Properties #

Example App #

Check out the example app for a comprehensive demo of all features.

To run the example:

cd example
flutter run

Contributing #

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

Issues #

If you encounter any issues or have feature requests, please file them in the issue tracker.

License #

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

Author #

Created with ❤️ by Mustafa Çetin

Changelog #

See CHANGELOG.md for a list of changes.