CustomToast

CustomToast is an enhanced toast notification system for Flutter that provides more flexibility and visual appeal than standard snackbars. Built using Flutter's Overlay API, it displays non-intrusive messages that automatically disappear after a set duration. Key features include customizable positioning, animations, icons, and dismissal controls.

✨ Features

  • Multiple display positions (top, center, bottom)
  • Smooth animations with customizable curves/durations
  • Icon support for visual feedback
  • Flexible styling (colors, padding, corners)
  • Dismissible with tap gesture
  • Auto-sizing for message content
  • Shadow effects for better visibility
  • Callback support when toast closes

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_toast: ^0.0.1

💡 Basic Usage

Simple Text Toast

CustomToast.show(
  context,
  message: "Profile saved successfully",
);

Icon Toast

CustomToast.show(
  context,
  message: "Upload complete",
  icon: Icons.cloud_done,
  backgroundColor: Colors.green,
);

Top Position Toast

CustomToast.show(
  context,
  message: "New message received",
  position: ToastPosition.top,
  offset: 50.0,
);

⚙️ Configuration Options

Parameter Type Description Default
message String Required toast text -
backgroundColor Color Background color Colors.black
textColor Color Text color Colors.white
fontSize double Text size 16.0
padding EdgeInsets Inner padding EdgeInsets.symmetric(horizontal: 24, vertical: 12)
duration Duration Display time 2 seconds
borderRadius double Corner radius 8.0
icon IconData? Optional leading icon null
position ToastPosition Display position ToastPosition.bottom
offset double Position offset 100.0
dismissible bool Allow tap dismissal false

🌟 Best Practices

  1. Use for Non-Critical Messages

    • Toasts should inform, not interrupt
    • For critical actions, use dialogs instead
  2. Keep Duration Appropriate

    • 2-3 seconds for simple confirmations
    • 4-5 seconds for complex information
  3. Visual Hierarchy

    // Success
    CustomToast.show(context,
      message: "Saved!",
      icon: Icons.check,
      backgroundColor: Colors.green,
    );
    
    // Error  
    CustomToast.show(context,
      message: "Failed to save",
      icon: Icons.error_outline,
      backgroundColor: Colors.red,
    );
    
  4. Positioning Guidelines

    • Bottom: Default for most actions
    • Top: System-level notifications
    • Center: Important but non-blocking

🔄 Comparison with SnackBar

Feature CustomToast SnackBar
Position Top/Center/Bottom Bottom only
Duration Configurable Fixed
Icons Supported Not supported
Dismissal Tap + Auto Swipe + Auto
Animation Customizable Default
Context Overlay (works everywhere) Requires Scaffold