emrade / flutter_cool_alert

A flutter package to display animated dialods

cool_alert

A Flutter package to display animated alert dialogs

Usage

To use this package, add cool_alert as a dependency in your pubspec.yaml file. And add this import to your file.

import 'package:cool_alert/cool_alert.dart';

Image

Example

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

CoolAlert Class

Attribute	Data type	Description	Default Value
context	BuildContext	@required	Null
type	CoolAlertType	@required - Type of alert dialog, ex: CoolAlertType.success for success dialogs	Null
title	String	Set a custom title for dialog	Based on the CoolAlertType selected
text	String	Set the description text of the dialog.	Null
widget	Widget	Set any you expect widget of the dialog.	Null
confirmBtnText	String	Text of confirm button	'Ok'
confirmBtnTap	Function	Function that handle click of confirm button	() => Navigator.pop(context)
confirmBtnColor	Color	Color of confirm Button	Theme.of(context).primaryColor
cancelBtnText	String	Text of cancel button	'Cancel'
cancelBtnTap	Function	Function that handle click of cancel button	() => Navigator.pop(context)
barrierDismissible	bool	Dismiss dialog on touch overlay	true
animType	CoolAlertAnimType	Type of dialogue enter animation	CoolAlertAnimType.scale
backgroundColor	Color	Background color of the animation	Color(0xFF515C6F)
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)
flareAsset	String	Custom flare asset	"animation.flr"
flareAnimationName	String	The name of the flare animation to play	"play"
lottieAsset	String	Custom lottie asset	"animation.json"
autoCloseDuration	Duration	Determines how long the dialog stays open for before closing	Null
width	double	Dialog width	MediaQuery.of(context).size.width
loopAnimation	boolean	Determines if the animation should loop or not	false
closeOnConfirmBtnTap	boolean	Detemines if dialog closes when the confirm button is tapped	true
reverseBtnOrder	boolean	Reverse the order of the buttons	false

flutter_cool_alert's Issues

Dismiss dialog without clicking anything

Dismiss dialog without clicking anything

Small bug with dismissing alert

With CoolAlertType.info, if you do not have anything assigned to the OnConfirmBtnTap: and you have the autoCloseDuration: tag active, if a use tries to press the OK button, it will dismiss the alert, then the autoCloseDuration would dismiss the current webpage since the alert is already dismissed, which will result in a blank page if the page was the base page.

Removing autoCloseDuration solves this issue, would be nice if the button can be disabled for the alerts so that its possible to just have the tick animation fade away after being displayed like a normal alert.

Need more customble options

Hi @emrade
I think some of the standard parameters need to be in options for 'CoolAlertType.confirm' .

Background color of the downfield, ( I really need this 😀 )

ButtonStyle for both buttons, at least border-radius, and background color option would be good,

autoCloseDuration

Hi,
I am trying to autoCloseDuration if the user didn't clicked on the ok button during 5 seconds,

CoolAlert.show(
context: context,
type: CoolAlertType.success,
title: 'hello' ,
text: "Thanks for choosing us",

                              closeOnConfirmBtnTap: false,
                             onConfirmBtnTap: () async {

                              Navigator.of(context).pop();
                              
                              },
                              autoCloseDuration: const Duration(seconds: 5),

                  );

but when the user clicked on ok after 5 seconds the app crashed. any idea.

I cannot place icons on my alert

I'd like to place some icons in the alert and add text next to him. The idea is that it is for a screen description. Can I make this with cool_alert?

Run Animation only one time?

Is there a way to change the Widget, so we can decide if we an endless loop of the animation or that the animation should run only once?

Android :- On phone back press, there is no callback option available.

In the android, I face the issue. No callback option is available to check if an alert is closed on the phone back press.

To restrict the user to hide the alert on the outside click is there.

I'm open to helping you with this issue.

Sizing

The CoolAlert get big on tablets,taking all the screen and don't seems to have a way to resize it,

can't style the text content

hi there, first I wanna thank you for this amazing plugin,
I wanna add many lines of text all aligned to left and apply different styles to each one,
in order to o this the 'text' attribute should take a Widget instead of String so that I can create RichText.

CoolAlertType is expecting ? but not available thats why dart giving me this below error

`CoolAlertOptions' is from 'package:cool_alert/src/models/cool_alert_options.dart' ('../../Documents/flutter_sdk_stable/flutter/.pub-cache/hosted/pub.dartlang.org/cool_alert-1.1.0/lib/src/models/cool_alert_options.dart').
Try accessing using ?. instead.
return options.confirmBtnColor == Colors.white
^^^^^^^^^^^^^^^
: Context: 'options' refers to a property so it couldn't be promoted.
../…/widgets/cool_alert_container.dart:11
See http://dart.dev/go/non-promo-property

final CoolAlertOptions? options
`

It doesn't close when pressing on confirmation

AutoCloseDuration causing multiple renders of popup.

CoolAlert.show(
              context: somekey.currentContext!,
              type: CoolAlertType.error,
              title: e.response?.statusCode != 200 ? "Server error" : "Device Error",
              text: "error text",
              autoCloseDuration: const Duration(seconds: 5),
              backgroundColor: Colors.red,
              barrierDismissible: true,
              width: 400,
              confirmBtnColor: Colors.red,
            );```

I was using coolAlert just like this and i noticed that when this triggers, the alert pops up several times (from 10 to 30 times).  I initially thought that this was happening because with each rerender of the currentContext widget the alert triggered again. 

I compared the implementation changing the coolAlert for a simple Showdialog with an AlertDialog and it worked properly. That got me thinking about how the coolAlert.show is a future and that would be the main difference with an AlertDialog. I commented the autoCloseDuration and it worked fine, just showing it once.

Currently i'm using it without the autoCloseDuration, but it would be nice if this could be checked.

Apologies in advance for any english grammar mistake, english is not my native language.

 

Not close dialog when clicking on ok button

This is my code

CoolAlert.show(
      context: context,
      type: CoolAlertType.success,
      title: title,
      text: desc,
      onConfirmBtnTap: path != null ? () async{
          Navigator.pushNamed(context, path);
      } : null,

when i pass null to path it will working fine but when i pass it any thing then dialog will not close

even i tried Navigator.pop(context); before push then same nothing happen and when i add it after push it will push and came to same page but dialog is still open even i tried to return null; but this will also not close

can anyone tell me how i close it;

How to use API to close

How to use API to close，No user trigger is required， Use APi

Navigator.pushReplacement() not working on confirm button tap

ListTile(
                          iconColor: Colors.white,
                          textColor: Colors.white,
                          leading: Icon(Icons.logout_outlined),
                          title: Text("Logout"),
                          onTap: () {
                            CoolAlert.show(
                                context: context,
                                type: CoolAlertType.confirm,
                                title: 'Logout',
                                text: 'Are you sure you want to logout?',
                                confirmBtnText: 'Yes',
                                confirmBtnColor: Colors.red,
                                cancelBtnText: 'No',
                                closeOnConfirmBtnTap: true,
                                onConfirmBtnTap: () async {
                                  _prefs.setString(Prefs.adminUser, '');
                                  _prefs.setBool(Prefs.isLoggedIn, false);
                                  Navigator.pushReplacement(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => Login()));
                                });
                          },
                        )

Above is the code snippet from my app. When the 'Yes' button is clicked, it erases the SharedPreference data, but not navigates to the Login Screen. Why?

Can move confirm button to left side?

how can i move confirm button to left side.
if i change text in confirmBtnText to cancel and cancelBtnText to confirm i also can't change cancel button background color to green. or i should create custom button on all widget.
Sorry for my bad language.

Lottie animation keeps looping

Hi there,

When I use a Lottie animation, it keep looping even if I explicitly set loopAnimation to false.
Code I used is:

CoolAlert.show(
     context: context,
     type: CoolAlertType.error,
     loopAnimation: false,
     title: "Error",
     lottieAsset: "assets/animations/error.json",
     text: "error",
);

The animation I've used is this one

Not sure what if I'm doing something wrong. Any advice would be appreciated, thank you!

Cancel Button Always Popping Context

i Fixed The issue, this suffered a regression os last update too, please apply to package

Add Null safety support

how can I change the color of cancel button?

there is no setting like confirmBtnColor for cancel button. how can I change the cancel button color?

Future Builder

Cannot use it in Future Builder

add optional decorations for button

confirmaBtnDecoration : BoxDecoration(borderRadius: 14 or whatever, color: red)

Custom Widgets Not being Displayed on 2.0.1

Hello, i was using 1.1.0, after update o 2.0.1, custom widgets stopped working on alerts.

overflow problem

When I turn the phone upside down, it gives an error like this.
Also, I can't make the text left-justified and justified.
I would be glad if you help.

Need option to specify width

Need option to specify width, otherwise dialog is too wide on desktop or wide screens:

Flutter Web: how can i control the width of the popup?

In Web, the popup Dialog is just Expanded to the full width of the screen which is not looking good. How can I control the width of the popup?

Loading alert close on completion of an asynchronous call

I want to use Loading Alert while calling an API similar to progress dialog. Is it possible?

Cannot add custom animation in alert

play animations once

Is there a way to prevent infinity animations? Every alert icons plays infinity. I want them to play only once.
@emrade

Dialog doesn't close by tapping on "onConfirmBtnTap".

Dialog doesn't close when we use to tap "onConfirmBtnTap".

CoolAlert.show(
              context: context,
              type: CoolAlertType.success,
              text: responseData['msg'],
              onConfirmBtnTap: ( ){ ... }
        }

And How to hide the "loading" dialog automatically?

CoolAlert.show(
                      context: context,
                      type: CoolAlertType.loading,
                    );

I don't know if this is a problem or not, it's just not pleasing to the eye when running flutter

I get the below message when running "cool_alert", I don't know if it has anything to do with the "animation pack", when running everything works fine, but this message looks unsightly, and I don't know if it will interrupt the release and compilation.

/opt/homebrew/Caskroom/flutter/2.5.3/flutter/.pub-cache/hosted/pub.dartlang.org/flare_flutter-3.0.2/lib/flare_render_box.dart:167:26: Warning: Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes null.

• 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('/opt/homebrew/Caskroom/flutter/2.5.3/flutter/packages/flutter/lib/src/scheduler/binding.dart').
  SchedulerBinding.instance?.cancelFrameCallbackWithId(_frameCallbackID);

Remove the animation at top

hi, this plugin is great.
however, i would like to remove the animation at top.
is there any option to make this happen?
thanks.
william

double tap in "ok" button close page

it´s a little bug if double tap very fast in ok button (in CoolAlert.show), because the first tap will close the alert and second tap will close the page.

Is very hard this happen but i belive is important fix in to next version

tks

cool alert two

Did you move to coolalert two?