elegant_notification 1.8.0

A new flutter package to display notifications on top of the screen, full customizable with built-in themes

Elegant Notification

An elegant notification to display important messages to users

Features

• 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
• onClose and onProgressFinished callback handlers
• Animated progress bar indicator
• 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

Getting Started

To use this elegant notification package you need to add the dependency in pubspec.yaml file.

dependencies:
	elegant_notification: ^1.8.0

Parameters

///The toast title if any
final  Text?  title;

///The toast description text (required)
final  Text  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 40px
late 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: 100)`
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;


///The duration how much the notification will take time, duration in milliseconds
///by default the duration is `2500 milliseconds`
final int 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 Function? onCloseButtonPressed;


///Function invoked when the notification is closed after the finish of the progress indicator
final Function? onProgressFinished;


///The type of the align set on the notification
///possible values
///{
///top,
///center,
///bottom
///}
///default value `top`
///
final  NotificationPosition  notificationPosition;


///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;

///Function invoked when tapping outside the notification
///Or when pressing the back button of the phone
///Or when taping on the screen when the toast is displayed
final Function()? onDismiss;

///The progress indicator background color
///by default it's grey
final Color progressIndicatorBackground;

Migration to 1.1.0

If you are using 1.0.0 you need to update animation attribute values following the camelCase conventions (eg: FROM_TOP -> fromTop)

Migration to 1.3.0

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.

Migration to 1.5.1

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)

Migration to 1.5.4

Enum names has been changed: NOTIFICATION_POSITION is now NotificationPostion ANIMATION is now AnimationType

Examples

• Success theme animation example

ElegantNotification.success(
	title:  Text("Update"),
	description:  Text("Your data has been updated")
).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);

Contribution

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.

Contributors