An elegant notification to display important messages to users
![]() |
![]() |
---|---|
![]() |
![]() |
- Display a top notification with animation
- Built-in themes (Success, Error, Info)
- Different display animations (fromTop, fromBottom, fromLeft, fromRight)
- Support for all display alignment positions (TopLeft, TopCenter, TopRight, CenterLeft, Center, CenterRight, BottomLeft, BottomCenter, BottomRight)
- Support custom theme implementation
- on close and on progress finished callback handlers
- Animated progress bar indicator
- Customizable dismiss direction
- Background customization
- Animation duration customization
- Notification position customization
- Add clickable action widget to notification
- Notification dismiss customization
- Customizable notification dimensions (height and width)
- Customizable barrier dismission and on dismiss action
- Slide back animation
- Customizable close button
- RTL support
To use this elegant notification package you need to add the dependency in pubspec.yaml
file.
dependencies:
elegant_notification: ^1.14.0
///The toast title widget
final Widget? title;
///The toast description widget
final Widget description;
///The toast icon, required only if using the default constructor
///for other toast types (Success, Info, error) the icon is not changeable
///
late Widget? icon;
///The size of the icon, by default it's 20px
///
final double iconSize;
///The type of the animation set on the notification
///possible values
///```dart
///{
///fromLeft,
///fromRight,
///fromTop,
///fromBottom,
///}
///```
///default value `fromLeft`
///
final AnimationType animation;
///The duration of the animation
///Default value `Duration(milliseconds: 600)`
///
final Duration animationDuration;
///The shadow color applied on the notification widget
/// by defualt it's `Colors.grey`
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
late Color shadowColor = Colors.grey;
/// the background color of the notification
/// by default it's set to white
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
late Color background;
///The color of the progress
///by default it's blue
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
late Color progressIndicatorColor;
///the border radius of the notification widget
///this parameter it's only set if you are using the default constructor
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
///
late double radius = 5.0;
///How much the notification will take time,
///by default the duration is `3000 milliseconds`
///
final Duration toastDuration;
///enable or disable the shadow rendering
///by default it's true
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
///
late bool enableShadow = true;
///enable or disable the progress indicator rendering
///by default the indicator is displayed
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
///
late bool showProgressIndicator;
///Display or hide the close button
///by default the close button is displayed
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
///
final bool displayCloseButton;
///Close widget rendered as the close function
///by default the close button is displayed, if you don't want it set `closeButton` to null
/// for types constructors (Success, Info, Delete) this parameter is unchangeable
///
final Widget Function(void Function() dismissNotification)? closeButton;
///Function invoked when user press on the close button
final void Function()? onCloseButtonPressed;
///Function invoked when the notification is closed after the finish of the progress indicator
///
final void Function()? onProgressFinished;
///Function invoked when the user taps on the notification
final void Function()? onNotificationPressed;
///The type of the notification, will be set automatically on every constructor
///possible values
///```dart
///{
///success,
///error,
///info,
///custom
///}
///```
late NotificationType notificationType;
///The notification position in the screen
///by default the position is set to `Alignment.topRight`
final Alignment position;
///Action widget rendered with clickable inkwell
///by default `action == null`
final Widget? action;
///Function invoked when pressing `action` widget
///must be not null when `action != null`
final Function()? onActionPressed;
///define whether the notification will be dismissed automatically or not
///by default `autoDimiss == false`
final bool autoDismiss;
///the width of the notification widget
final double? width;
///the height of the notification widget
final double? height;
///progress bar indicator width, by default it's null so it takes the widget's width
final double? progressBarWidth;
///progress bar indicator height, by default it's null so it takes the widget's height
final double? progressBarHeight;
///progress bar indicator padding constraints
final EdgeInsetsGeometry? progressBarPadding;
///Function invoked when tapping outside the notification
///Or when pressing the back button of the phone
///or when tapping on the screen
final Function()? onDismiss;
///The direction of the dismissible widget
///by default it's `DismissDirection.horizontal`
final DismissDirection dismissDirection;
///If the notification is dismissible or not
///by default it's true
final bool isDismissible;
///The progress indicator background color
///by default it's grey
final Color progressIndicatorBackground;
If you are using 1.0.0 you need to update animation
attribute values following the camelCase conventions
(eg: FROM_TOP -> fromTop)
If you are using version less than 1.3.0 you need to update the usage of title and description because in 1.3.0 there's no longer descriptionStyle
and titleStyle
attributes those parameters are merged into title
and description
so now you pass a Text
object.
If you are using dismissable
attribute in the 1.5.1 version the notification position should be set to NOTIFICATION_POSITION.bottom
otherwise you need to set dismissable to false to change the notification position (center, bottom or top)
Enum names has been changed:
NOTIFICATION_POSITION
is now NotificationPostion
ANIMATION
is now AnimationType
notificationPosition
will no longer set the alert position instead use position
with Alignment
type
onTap
isonNotificationPressed
nowcloseOnTap
is removed and replaced withisDismissble
anddismissDirection
attributes
- Success theme animation example
ElegantNotification.success(
title: Text("Update"),
description: Text("Your data has been updated"),
onDismiss: () {
print('Message when the notification is dismissed');
},
onTap: () {
print('Message when the notification is pressed');
},
closeOnTap: true,
).show(context);
- Info theme animation example
ElegantNotification.info(
title: Text("Info"),
description: Text("This account will be updated once you exit")
).show(context);
- Error theme animation example
ElegantNotification.error(
title: Text("Error"),
description: Text("Please verifiy your data")
).show(context);
- Custom theme animation example
ElegantNotification(
title: ("New version"),
description: Text("A new version is available to you please update."),
icon: Icon(
Icons.access_alarm,
color: Colors.orange,
),
progressIndicatorColor: Colors.orange,
).show(context);
- Without title
ElegantNotification.error(
description: Text("Please verifiy your data")
).show(context);
- With Action
ElegantNotification.info(
description: Text('This account will be updated once you exit',),
action: Text(
'Link',
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.blue,
),
),
onActionPressed: (){
print('Link pressed');
},
).show(context);
- Using
dismissDirection
attribute
ElegantNotification.success(
width: 360,
position: Alignment.topCenter,
animation: AnimationType.fromTop,
title: Text('Update'),
description: Text('Your data has been updated'),
onDismiss: () {
print('Message when the notification is dismissed');
},
onNotificationPressed: () {
print('Message when the notification is pressed');
},
isDismissible: true,
dismissDirection: DismissDirection.up,
).show(context);
Of course the project is open source, and you can contribute to it repository link
- If you found a bug, open an issue.
- If you have a feature request, open an issue.
- If you want to contribute, submit a pull request.