Flutter Emoji Alert

enter image description here

A new Stylish Emoji Alert with a wide variety of emojis, simple to implement and full customizable.

Features

  • Single line basic alert with default emoji

  • Add dynamic widgets not only text any widget you want

  • Add buttons with their onPress handlers

  • Choose the alert display behavior : Normal Alert or Bottom Sheet dialog

  • Choose an emoji from a variety of emojis

  • Animations when displaying the alert popup


Getting Started

To add emoji_alert to your project add this line to your pubspec.yaml


dependencies:
	emoji_alert:  1.1.0

Or you can reference the github repository directly

	dependencies:
		emoji_alert:
			git: https://github.com/koukibadr/Emoji_Alert.git

Parameters

AttributeTypeDefaultRequiredDescription
descriptionWidgetN/ATrueThe alert body content
alertTitleWidgetN/AFalseThe alert top content
enableMainButtonboolFalseFalseDisplay or not the popup's main button
enableSecondaryButtonboolFalseFalseWhether display or not the secondary button
onSecondaryButtonPressedFunctionnullFalseThe function that will be invoked on pressing the secondary button
onMainButtonPressedFunctionnullFalseThe function that will be invoked on pressing the main button
onMainButtonPressedFunctionnullFalseThe function that will be invoked on pressing the main button
emojiTypeEMOJI_TYPEHAPPYFalsethe emoji that will be displayed possible values: ANGRY, CONFUSED, COOL, HAPPY, JOYFUL, LAUGHING, SAD, SCARED, SHOCKED, SMILE, WINK
heightdouble200Falsethe height of the popup
emojiSizedouble80Falsethe size of the emoji
backgroundColorWhiteFalsethe popup background color
mainButtonColorColorBlueFalseThe main button background color
secondaryButtonColorColorBlueFalsethe secondary button color, PS: an opacity value will be added to this color
mainButtonTextTextText("Confirm")Falsethe main button text
secondaryButtonTextTextText("Cancel")Falsethe secondary button text
buttonSizedouble200Falsebuttons width size
cancelButtonColorOpacitydouble0.2Falsean opacity will be added to the secondary button background color
cancelableboolTrueFalseWhether the popup can be dismissed on pressing outside it or not
cornerRadiusTypeCORNER_RADIUS_TYPESBOTTOM_ONLYFalsethe border radius type, possible values: BOTTOM_ONLY, TOP_ONLY, ALL_CORNERS, NONE
widthdoublenullFalsethe popup width by default it's null
animationTypeANIMATION_TYPEANIMATION_TYPE.NONEFalsethe animation type that will be applied on the emoji NONE, FADEIN, TRANSITION, ROTATION

Examples

Simple alert with just a text in the body content


EmojiAlert(

description:  Column(

children: [

Text("Simple Example of the popup"),

Text("with minumum attributes"),

],

)).displayAlert(context);

first_example_alert.png

Example with custom widget in the popup content body


EmojiAlert(
	alertTitle:  Text("Joyful Alert", style:  TextStyle(fontWeight:  FontWeight.bold)),
	description:  Column(
		children: [
		Text("You can add also any widget"),
		Container(
			width:  200,
			child:  TextField(
				decoration:  InputDecoration(hintText:  "Input field example"),
			)),
	]
	),
	cancelable:  true,
	emojiType:  EMOJI_TYPE.JOYFUL,
	height:  300,
).displayAlert(context);

second_example_alert.png


EmojiAlert(
	alertTitle:  Text("Angry Alert", style:  TextStyle(fontWeight:  FontWeight.bold)),
	description:  Column(
		children: [
			Text("You can add a main button"),
		],
	),
	enableMainButton:  true,
	mainButtonColor:  Colors.red,
	onMainButtonPressed: () {
		print("Hello");
		Navigator.pop(context);
	},
	cancelable:  false,
	emojiType:  EMOJI_TYPE.ANGRY,
	height:  300,
).displayAlert(context);

third_example_alert.png

Bottom Sheet Modal

to display it as bottom sheet modal you need to use displayBottomSheet function

And you can display it as a bottom sheet modal, the code below is an example


EmojiAlert(
	alertTitle:  Text("Bottom Sheet Modal",
	style:  TextStyle(fontWeight:  FontWeight.bold)),
	description:  Column(
		children: [
			Text("And this is a bottom sheet modal with different Radius",
				style:  TextStyle(color:  Colors.blue),
				textAlign:  TextAlign.center,
			),
		],
	),
	enableMainButton:  true,
	cornerRadiusType:  CORNER_RADIUS_TYPES.TOP_ONLY,
	mainButtonColor:  Colors.green,
	mainButtonText:  Text("Save"),
	onMainButtonPressed: () {
		Navigator.pop(context);
	},
	cancelable:  true,
	emojiType:  EMOJI_TYPE.SMILE,
	width:  300,
	height:  300,
).displayBottomSheet(context);

fifth_example_alert.png

With Animation

in this example we used TRANSITION animation but you can choose any other built-in animations (see attributes description above)

EmojiAlert(
	description:  Column(
		children: [
			Text("Simple Example with animation"),
			Text("This is a transition animation"),
		],
	),
	animationType:  ANIMATION_TYPE.TRANSITION
).displayAlert(context);

the result:

animation_example.gif

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.

Libraries

arrays
constants
emoji_alert
emoji_icon
main_button
secondary_button
sizes