cooler_alerts 2.1.2

SDKflutter
Platformandroidioswindowslinuxmacosweb

A Flutter package to display animated alert dialogs, replacement for cool_alert.

cooler_alerts

A Flutter package to display animated alert dialogs

Please note - the origin author of the cool_alert hasn't provided updates for an extended period of time. This package serves to support, and enhance the existing package.

Usage

To use this package, add the package as dependency in your pubspec.yaml file.

cooler_alerts: ^2.1.2

Then, add this import to your dart file.

import 'package:cooler_alerts/cooler_alerts.dart';

Coming from the original cool_alert package?

The transition is simple:

  1. change the package name in pubspec.yaml from cool_alert to cooler_alerts
  2. replace all package references from
package:cool_alert/cool_alert.dart;

to

package:cooler_alerts/cooler_alerts.dart;

Image

Screenshot  Gif

Example

CoolAlert.show(
   context: context,
   type: CoolAlertType.success,
   text: "Your transaction was successful!",
);

CoolAlert Class

AttributeData typeDescriptionDefault Value
contextBuildContext@requiredNull
typeCoolAlertType@required - Type of alert dialog, ex: CoolAlertType.success for success dialogsNull
titleStringSet a custom title for dialogBased on the CoolAlertType selected
textStringSet the description text of the dialog.Null
widgetWidgetSet any you expect widget of the dialog.Null
confirmBtnTextStringText of confirm button'Ok'
confirmBtnTapvoid Function(BuildContext)?Function that handle click of confirm button, provides dialog context parameter.(c) => Navigator.pop(c)
confirmBtnColorColorColor of confirm ButtonTheme.of(context).primaryColor
cancelBtnTextStringText of cancel button'Cancel'
cancelBtnTapvoid Function(BuildContext)?Function that handle click of cancel button, provides dialog context parameter.(c) => Navigator.pop(c)
barrierDismissibleboolDismiss dialog on touch overlaytrue
animTypeCoolAlertAnimTypeType of dialogue enter animationCoolAlertAnimType.scale
backgroundColorColorBackground color of the animationColor(0xFF515C6F)
confirmBtnTextStyleTextStyleConfirm button text themeTextStyle(color: Colors.white, fontWeight:FontWeight.w600,fontSize: 18.0)
cancelBtnTextStyleTextStyleCancel button text themeTextStyle(color: Colors.grey, fontWeight:FontWeight.w600,fontSize: 18.0)
flareAssetStringCustom flare asset"animation.flr"
flareAnimationNameStringThe name of the flare animation to play"play"
lottieAssetStringCustom lottie asset"animation.json"
autoCloseDurationDurationDetermines how long the dialog stays open for before closingNull
widthdoubleDialog widthMediaQuery.of(context).size.width
loopAnimationbooleanDetermines if the animation should loop or notfalse
closeOnConfirmBtnTapbooleanDetemines if dialog closes when the confirm button is tappedtrue
reverseBtnOrderbooleanReverse the order of the buttonsfalse
titleTextAlignTextAlignText alignment for titleTextAlign.center
titleOverflowTextOverflowText overflow for titleNull
textTextAlignTextAlignText alignment for textTextAlign.center
textOverflowTextOverflowText overflow for textNull
canPopbooleanPrevents undesired navigation unless explicitly desired.true
onPopInvokedvoid Function(bool)?Notifies of whether the context was popped with didPop parameterNull

Popping the dialog

To pop the dialog from one of the buttons, you have the following options.

  1. Using closeOnConfirmBtnTap: true will automatically pop the dialog when the confirm button is tapped.
  2. Using confirmBtnTap or cancelBtnTap functions to pop the dialog manually. This should be done with the context provided (see notes below)
CoolAlert.show(
   context: context,
   type: CoolAlertType.success,
   text: "Your transaction was successful!",
   confirmBtnTap: (dialogContext) {
      Navigator.pop(dialogContext);
   }
);

Notes:

  • if you have have closeOnConfirmBtnTap: true while calling Navigator.pop(dialogContext) in the above example, you'll pop twice and may run into some issues. Have either one or the other.
  • If you have autoCloseDuration set, this is a wrapper for Navigator.pop(coolAlertParentContext, rootNavigator: true) after the duration is up. In the above example, if the user taps "confirm" and the dialog auto closes, it will pop twice and you may run into issues.