koukibadr/Emoji_Alert

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

Attribute	Type	Default	Required	Description
description	Widget	N/A	True	The alert body content
alertTitle	Widget	N/A	False	The alert top content
enableMainButton	bool	False	False	Display or not the popup's main button
enableSecondaryButton	bool	False	False	Whether display or not the secondary button
onSecondaryButtonPressed	Function	null	False	The function that will be invoked on pressing the secondary button
onMainButtonPressed	Function	null	False	The function that will be invoked on pressing the main button
onMainButtonPressed	Function	null	False	The function that will be invoked on pressing the main button
emojiType	EMOJI_TYPE	HAPPY	False	the emoji that will be displayed possible values: [ANGRY, CONFUSED, COOL, HAPPY, JOYFUL, LAUGHING, SAD, SCARED, SHOCKED, SMILE, WINK]
height	double	200	False	the height of the popup
emojiSize	double	80	False	the size of the emoji
background	Color	White	False	the popup background color
mainButtonColor	Color	Blue	False	The main button background color
secondaryButtonColor	Color	Blue	False	the secondary button color, PS: an opacity value will be added to this color
mainButtonText	Text	Text("Confirm")	False	the main button text
secondaryButtonText	Text	Text("Cancel")	False	the secondary button text
buttonSize	double	200	False	buttons width size
cancelButtonColorOpacity	double	0.2	False	an opacity will be added to the secondary button background color
cancelable	bool	True	False	Whether the popup can be dismissed on pressing outside it or not
cornerRadiusType	CORNER_RADIUS_TYPES	BOTTOM_ONLY	False	the border radius type, possible values: [BOTTOM_ONLY, TOP_ONLY, ALL_CORNERS, NONE]
width	double	null	False	the popup width by default it's null
animationType	ANIMATION_TYPE	ANIMATION_TYPE.NONE	False	the 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.