A reusable Flutter notification overlay widget for displaying success, error, warning, and info messages. This package allows you to show customizable notifications that automatically dismiss after a specified duration and can stack multiple notifications.
- Styled notifications for different types: Success, Error, Warning, and Info.
- Automatically dismisses after a configurable duration.
- Supports stacking multiple notifications.
- Highly customizable UI and message content.
- Easy to integrate into any Flutter project.
Add this to your pubspec.yaml
:
dependencies:
t_overlay_notification: ^1.1.0
In your Dart file, import the package:
import 'package:t_overlay_notification/t_overlay_notification.dart';
Use the TNotificationOverlay.show() method to show a notification:
TNotificationOverlay.show(
context: context, // The BuildContext to insert the overlay.
title: 'Success', // Title of the notification.
message: 'This is a success notification.', // Message content.
type: NotificationType.success, // The type of the notification (success, error, warning, info).
);
- TNotificationOverlay.success: Green color notification for success messages.
- TNotificationOverlay.error: Red color notification for error messages.
- TNotificationOverlay.warning: Yellow color notification for warning messages.
- TNotificationOverlay.info: Blue color notification for informational messages.
- NotificationType.success: Green color notification for success messages.
- NotificationType.error: Red color notification for error messages.
- NotificationType.warning: Yellow color notification for warning messages.
- NotificationType.info: Blue color notification for informational messages.
Customization
You can customize the duration of the notification, its positioning, and other UI aspects like color, padding, and margin.
TNotificationOverlay.show(
context: context,
title: 'Info',
message: 'This is an info notification.',
type: NotificationType.info,
duration: Duration(seconds: 5), // Custom duration
);
To show a simple notification with a title, subtitle, and custom type, use the TNotificationOverlay.show()
method:
import 'package:flutter/material.dart';
import 'package:t_notification_widget/t_notification_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Notification Overlay Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
TNotificationOverlay.show(
context: context,
title: 'Success Notification',
subTitle: 'This is a success notification.',
type: NotificationType.success,
duration: Duration(seconds: 3),
height: 80, // Adjust the height of the notification
width: 350, // Adjust the width of the notification
spacing: 8, // Space between stacked notifications
position: NotificationPosition.topRight,
);
},
child: Text('Show Notification'),
),
),
),
);
}
}
You can customize the slide-in and fade-out animations for your notifications:
import 'package:flutter/material.dart';
import 'package:t_notification_widget/t_notification_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Animated Notification Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
TNotificationOverlay.show(
context: context,
title: 'Warning Notification',
subTitle: 'This is a warning notification.',
type: NotificationType.warning,
duration: Duration(seconds: 3),
slideInDirection: SlideDirection.left, // Slide from left
slideOutDirection: SlideDirection.left, // Slide out to left
height: 80,
width: 350,
spacing: 10,
position: NotificationPosition.bottomLeft,
);
},
child: Text('Show Animated Notification'),
),
),
),
);
}
}
Customize the appearance of the notification with various color options:
TNotificationOverlay.show(
context: context,
title: 'Custom Notification', // Required title
subTitle: 'This is a custom-styled notification.', // Optional subtitle
action: TextButton( // Example action widget
onPressed: () {
print('Action clicked');
},
child: Text('UNDO', style: TextStyle(color: Colors.white)),
),
type: NotificationType.info, // Notification type
backgroundColor: Colors.blueAccent, // Background color
borderColor: Colors.blue, // Border color
titleColor: Colors.white, // Title text color
messageColor: Colors.white70, // Subtitle text color
iconColor: Colors.white, // Icon color
borderRadius: 10.0, // Rounded corners
paddingVertical: 16.0, // Vertical padding
paddingHorizontal: 20.0, // Horizontal padding
duration: Duration(seconds: 5), // Notification duration
sticky: false, // Set to true for sticky notifications
height: 100, // Notification height
width: 300, // Notification width
spacing: 12, // Spacing between notifications
position: NotificationPosition.topLeft, // Position on the screen
slideInDirection: SlideDirection.leftToRight, // Slide-in animation direction
slideOutDirection: SlideDirection.rightToLeft, // Slide-out animation direction
);
- show(): Displays the notification with the provided parameters.
- context: The BuildContext of the widget.
- title: The title of the notification (required).
- subTitle: The subtitle of the notification (optional).
- type: The type of notification (success, error, warning, info) [default: NotificationType.info].
- duration: Duration for the notification to appear [default: Duration(seconds: 3)].
- spacing: Space between stacked notifications [default: 10.0].
- position: Position of the notification on the screen (topLeft, topRight, bottomLeft, bottomRight).
- slideInDirection: The direction from which the notification slides in (optional).
- slideOutDirection: The direction from which the notification slides out (optional).
- height, width: Dimensions of the notification box (optional).
- backgroundColor, borderColor, titleColor, messageColor, iconColor: Customize colors of the notification.
- paddingVertical, paddingHorizontal: Customize padding for the notification.
- borderRadius: Customize the border radius of the notification.
- onClose: Callback for handling notification close action.
- You can customize the animation duration and slide direction according to your needs.
- The slideInDirection and slideOutDirection can be set to any of the following:
- SlideDirection.left
- SlideDirection.right
- SlideDirection.top
- SlideDirection.bottom
- The notification automatically dismisses after the specified duration unless manually closed with the onClose callback.
- Contributions: If you'd like to contribute to this project, please open a pull request or submit an issue. Contributions are welcome to improve the UI or add new features.
- Issues: If you encounter any bugs or have suggestions for improvements, please file an issue in the repository.
- Support: The package is actively maintained, and issues are typically addressed within 1–2 business days.