Cherry Toast Messages #

A beautiful, responsive toast notification package for Flutter with animated overlays and customizable themes. Perfect for displaying success, error, warning, and info messages with smooth animations.

Features #

• 🎨 Beautiful Design: Modern, clean toast notifications with smooth animations
• 📱 Responsive: Automatically adapts to different screen sizes and orientations
• 🎭 Multiple Themes: Pre-built themes for success, error, warning, and info messages
• ⚡ Customizable: Fully customizable colors, styles, and animations
• 🚀 Easy to Use: Simple API with intuitive method names
• 🎯 Accessible: Proper contrast ratios and touch targets

Getting Started #

Installation #

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

dependencies:
  cherry_toast_msgs: ^1.0.0

Import #

import 'package:cherry_toast_msgs/cherry_toast_msgs.dart';

Usage #

Show Different Types of Toasts #

Success Toast

CherryToastMsgs.showSuccessToast(
  context: context,
  title: "Success!",
  description: "Your action was completed successfully.",
);

Error Toast

CherryToastMsgs.showErrorToast(
  context,
  "Error!",
  "Something went wrong. Please try again.",
);

Warning Toast

CherryToastMsgs.showWarningToast(
  context,
  "Warning!",
  "Please check your input before proceeding.",
);

Info Toast

CherryToastMsgs.showInfoToast(
  context,
  "Information",
  "Here's some useful information for you.",
);

Static Info Container #

For static information displays, use the StaticeInfoContainerWidget:

StaticeInfoContainerWidget(
  message: "This is a static information container",
  icon: Icons.info_outline,
  backgroundColor: Colors.blue.shade50,
  borderColor: Colors.blue.shade200,
  iconColor: Colors.blue.shade600,
  textColor: Colors.blue.shade700,
)

Customization #

Custom Toast with Custom Parameters #

CherryToastMsgs.showAnimatedToast(
  context: context,
  title: "Custom Toast",
  description: "This is a custom toast with custom styling",
  icon: Icons.star,
  iconColor: Colors.white,
  iconBackground: Colors.purple,
  backgroundColor: Colors.purple.shade50,
  borderColor: Colors.purple.shade200,
  titleStyle: TextStyle(
    color: Colors.purple.shade800,
    fontWeight: FontWeight.bold,
    fontSize: 18,
  ),
  descriptionStyle: TextStyle(
    color: Colors.purple.shade600,
    fontSize: 16,
  ),
  borderRadius: 16,
  borderWidth: 2,
  duration: Duration(seconds: 5),
  elevation: 12,
  width: 300,  // Custom width
  height: 100, // Custom height
);

Dynamic Positioning Examples #

Top Position (Default)

CherryToastMsgs.showSuccessToast(
  context: context,
  title: "Success!",
  description: "Operation completed successfully",
  position: ToastPosition.top,
);

Bottom Position

CherryToastMsgs.showErrorToast(
  context,
  "Error!",
  "Something went wrong. Please try again.",
  position: ToastPosition.bottom,
);

Center Position

CherryToastMsgs.showInfoToast(
  context,
  "Information",
  "Important information for you",
  position: ToastPosition.center,
);

Custom Position with Offset

CherryToastMsgs.showWarningToast(
  context,
  "Warning!",
  "Please check your input",
  position: ToastPosition.custom,
  topOffset: 100.0, // 100px from top
);

Bottom Position with Custom Offset

CherryToastMsgs.showAnimatedToast(
  context: context,
  title: "Custom Bottom Toast",
  description: "This toast appears at the bottom with custom offset",
  icon: Icons.notifications,
  iconColor: Colors.white,
  iconBackground: Colors.orange,
  backgroundColor: Colors.orange.shade50,
  borderColor: Colors.orange.shade200,
  position: ToastPosition.bottom,
  bottomOffset: 50.0, // 50px from bottom
);

All Toast Methods Support Positioning

// Success toast at top
CherryToastMsgs.showSuccessToast(
  context: context,
  title: "Success",
  description: "Task completed",
  position: ToastPosition.top,
);

// Error toast at bottom
CherryToastMsgs.showErrorToast(
  context,
  "Error",
  "Operation failed",
  position: ToastPosition.bottom,
);

// Warning toast in center
CherryToastMsgs.showWarningToast(
  context,
  "Warning",
  "Please be careful",
  position: ToastPosition.center,
);

// Info toast with custom position
CherryToastMsgs.showInfoToast(
  context,
  "Info",
  "Important notice",
  position: ToastPosition.custom,
  topOffset: 150.0,
);

Custom Size Examples #

Toast with Custom Dimensions

CherryToastMsgs.showAnimatedToast(
  context: context,
  title: "Wide Toast",
  description: "This toast has custom width and height",
  icon: Icons.aspect_ratio,
  iconColor: Colors.white,
  iconBackground: Colors.teal,
  backgroundColor: Colors.teal.shade50,
  borderColor: Colors.teal.shade200,
  width: 400,  // Fixed width
  height: 120, // Fixed height
);

Static Container with Custom Size

StaticeInfoContainerWidget(
  message: "Custom sized static container",
  icon: Icons.aspect_ratio,
  backgroundColor: Colors.indigo.shade50,
  borderColor: Colors.indigo.shade200,
  iconColor: Colors.indigo.shade600,
  textColor: Colors.indigo.shade700,
  width: 350,  // Custom width
  height: 80,  // Custom height
)

API Reference #

CherryToastMsgs #

Methods

• showSuccessToast() - Shows a green success toast
• showErrorToast() - Shows a red error toast
• showWarningToast() - Shows a yellow warning toast
• showInfoToast() - Shows a blue info toast
• showAnimatedToast() - Method for custom toasts with full customization

Parameters

• context - BuildContext for the overlay
• title - The main title text
• description - The description text
• icon - Icon to display (optional for custom toasts)
• iconColor - Color of the icon
• iconBackground - Background color of the icon container
• backgroundColor - Background color of the toast
• borderColor - Border color of the toast
• titleStyle - TextStyle for the title
• descriptionStyle - TextStyle for the description
• borderRadius - Border radius of the toast (responsive default)
• borderWidth - Border width (responsive default)
• duration - How long the toast shows (default: 3 seconds)
• elevation - Shadow elevation (responsive default)
• shadowColor - Shadow color (default: Colors.black26)
• width - Custom width for the toast (optional, defaults to 85% of screen width)
• height - Custom height for the toast (optional, responsive default)
• position - Toast position: ToastPosition.top, ToastPosition.bottom, ToastPosition.center, or ToastPosition.custom (default: ToastPosition.top)
• topOffset - Custom top offset for positioning (optional)
• bottomOffset - Custom bottom offset for positioning (optional)

ToastPosition Enum #

The ToastPosition enum provides four positioning options for toasts:

• ToastPosition.top - Positions the toast at the top of the screen (default)
• ToastPosition.bottom - Positions the toast at the bottom of the screen
• ToastPosition.center - Centers the toast vertically on the screen
• ToastPosition.custom - Allows custom positioning with topOffset or bottomOffset

StaticeInfoContainerWidget #

A widget for displaying static information containers with customizable styling.

Parameters

• message - The text message to display
• icon - Icon to display (default: Icons.info_outline)
• backgroundColor - Background color (default: Colors.blue.shade50)
• borderColor - Border color (default: Colors.blue.shade200)
• iconColor - Icon color (default: Colors.blue.shade600)
• textColor - Text color (default: Colors.blue.shade700)
• borderRadius - Border radius (responsive default)
• padding - Padding (responsive default)
• iconSize - Icon size (responsive default)
• fontSize - Font size (responsive default)
• width - Custom width for the container (optional)
• height - Custom height for the container (optional)

Example #

Check out the example folder for a complete working example.

Contributing #

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

License #

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

Support #

If you encounter any problems or have suggestions, please file an issue at the GitHub repository.