GitLocker: The Coding Marketplace

Description:

quickalert

An instantly ready, full-featured alerts for development on any platform with flutter. Enabling you to complete projects and deploy quickly. With QuickAlert, you can display animated alert dialogs such as success, error, warning, confirm, loading or even a custom dialog.
Key Features 🔮 #
Easy To Use

The alerts are very flexible and can be customized very easily. In QuickAlert, the QuickAlert.show() triggers the alert, which informs the user about the situations that need acknowledgment.

Predefined Beautiful Alert Styles

Make use of the predefined alerts are very beautiful and can also be customized very easily. In QuickAlert there are 6 different types of alerts, they are Success, Error, Warning, Info, Confirm & Loading.

Predefined Title & Actions

In QuickAlert all the 6 different types of alerts have predefined title & actions matching the alert type.

Super Customizable

Build your custom alert with power of QuickAlert using the flutter widgets.

Change Animation

Set your favorite animation by choosing from scale, rotate, slideInDown, slideInUp, slideInLeft, slideInRight.

Set Auto close

Auto close the alert by setting auto close duration.

Set Overlay Tap to Dismiss

Control the alert's Barrier Dismissible Property by setting barrierDismissible to true or false.

And Many More...

QuickAlert Demo
Getting Started 🔥 #
Start by adding the library as a dependency to your project.
dependencies:
quickalert: <latest version>
copied to clipboard
Run the command get the dependency
$ flutter pub get
copied to clipboard
Import it in your dart code, you can use
import 'package:quickalert/quickalert.dart';
copied to clipboard
To display alert use QuickAlert.show() and define the type of alert.
QuickAlert.show(
context: context,
type: QuickAlertType.success,
); // That's it to display an alert, use other properties to customize.
copied to clipboard
Examples ⚡ #
There is a detailed example project in the example folder. You can directly run and play on it. There are code snippets from example project below.

Success #

QuickAlert.show(
context: context,
type: QuickAlertType.success,
text: 'Transaction Completed Successfully!',
);
copied to clipboard

Error #

QuickAlert.show(
context: context,
type: QuickAlertType.error,
title: 'Oops...',
text: 'Sorry, something went wrong',
);
copied to clipboard

Warning #

QuickAlert.show(
context: context,
type: QuickAlertType.warning,
text: 'You just broke protocol',
);
copied to clipboard

Info #

QuickAlert.show(
context: context,
type: QuickAlertType.info,
text: 'Buy two, get one free',
);
copied to clipboard

Confirm #

QuickAlert.show(
context: context,
type: QuickAlertType.confirm,
text: 'Do you want to logout',
confirmBtnText: 'Yes',
cancelBtnText: 'No',
confirmBtnColor: Colors.green,
);
copied to clipboard

Loading #

QuickAlert.show(
context: context,
type: QuickAlertType.loading,
title: 'Loading',
text: 'Fetching your data',
);
copied to clipboard

Custom #

QuickAlert.show(
context: context,
type: QuickAlertType.custom,
barrierDismissible: true,
confirmBtnText: 'Save',
customAsset: 'assets/custom.gif',
widget: TextFormField(
decoration: const InputDecoration(
alignLabelWithHint: true,
hintText: 'Enter Phone Number',
prefixIcon: Icon(
Icons.phone_outlined,
),
),
textInputAction: TextInputAction.next,
keyboardType: TextInputType.phone,
onChanged: (value) => message = value,
),
onConfirmBtnTap: () async {
if (message.length < 5) {
await QuickAlert.show(
context: context,
type: QuickAlertType.error,
text: 'Please input something',
);
return;
}
Navigator.pop(context);
await Future.delayed(const Duration(milliseconds: 1000));
await QuickAlert.show(
context: context,
type: QuickAlertType.success,
text: "Phone number '$message' has been saved!.",
);
},
);
},
title: 'Custom',
text: 'Custom Widget Alert',
leadingImage: 'assets/custom.gif',
);
copied to clipboard
Screenshots ✨ #
Here are some screenshots of the QuickAlert Dialogs.

QuickAlert Options 📖 #
These are the options available in QuickAlert Class.

Attribute
Data type
Description
Default Value

context
BuildContext
@required BuildContext
N/A

type
QuickAlertType
@required - Type of alert dialog, ex: QuickAlertType.success for success dialogs
NULL

title
String
Set a custom title for dialog
Based on the QuickAlertType selected

text
String
Set the description text of the dialog.
NULL

widget
Widget
Set custom widget of the dialog.
NULL

confirmBtnText
String
Text of confirm button
'Okay'

onConfirmBtnTap
Function
Function that handle click of confirm button
() => Navigator.pop(context)

confirmBtnColor
Color
Color of confirm Button
Colors.blue

showCancelBtn
bool
Determines if cancel button is shown or not
false

showConfirmBtn
bool
Determines if confirm button is shown or not
true

cancelBtnText
String
Text of cancel button
'Cancel'

onCancelBtnTap
Function
Function that handle click of cancel button
() => Navigator.pop(context)

barrierDismissible
bool
Dismiss dialog on touch overlay
true

animType
QuickAlertAnimType
Type of dialogue enter animation
QuickAlertAnimType.scale

confirmBtnTextStyle
TextStyle
Confirm button text theme
TextStyle(color: Colors.white, fontWeight:FontWeight.w600,fontSize: 18.0)

cancelBtnTextStyle
TextStyle
Cancel button text theme
TextStyle(color: Colors.grey, fontWeight:FontWeight.w600,fontSize: 18.0)

backgroundColor
Color
Color of dialog background
Colors.white

headerBackgroundColor
Color
Background Color of dialog Header Background
Colors.white

titleColor
Color
Color of title
Colors.black

textColor
Color
Color of text
Colors.black

barrierColor
Color
Color of Barrier
NULL

customAsset
String
Asset path of your custom asset
NULL

autoCloseDuration
Duration
Determines how long the dialog stays open for before closing
NULL

width
double
Dialog width
MediaQuery.of(context).size.shortestSide

titleAlignment
TextAlign
Title Alignment of the dialog
NULL

textAlignment
TextAlign
Text Alignment of the dialog
NULL

borderRadius
double
Dialog's border radius
15.0

disableBackBtn
bool
Determines if the dialog should be closed when back button is pressed
false