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
-
Use for Non-Critical Messages
- Toasts should inform, not interrupt
- For critical actions, use dialogs instead
-
Keep Duration Appropriate
- 2-3 seconds for simple confirmations
- 4-5 seconds for complex information
-
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, ); -
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 |