An instantly ready, full-featured alerts for development on any platform with flutter

Overview

QuickAlert Banner

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 Autoclose

Autoclose the alert by setiing autoclose 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

QuickAlert Demo

Getting Started 🔥

Start by adding the library as a dependency to your project.

dependencies:
  QuickAlert: 

Run the command get the dependency

$ flutter pub get

Import it in your dart code, you can use

import 'package:quickalert/quickalert.dart';

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.

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!',
);

Error

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

Warning

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

Info

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

Confirm

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

Loading

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

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',
); 

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'
confirmBtnTap 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
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 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)
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

Developed By 😃

Akash S

Akash S
A computer science enthusiast with a passion for technology, travel, and design. I view computers and applications as a vehicle to inspire others to pursue their passions and enjoy the world around them. Read More

Buy Me A Coffee

Brought To You By 😇

Belovance's products and services portfolio touches almost all people on a daily basis, across economic and social spectrums. We are now focussed on building platforms that will herald the Fourth Industrial Revolution and will create opportunities and avenues for the entire world and all its population to realise their true potential.

Comments
  • Close Dialog programatically

    Close Dialog programatically

    Hello, first of all. Thank you for this amazing package. It has helped me provide an elegant and beautiful alerts to my app.

    I have faced a situation where I need to close the dialog dynamically, after certain action. For example, when fetching data from an API is complete, I would want to close the "loading" dialog. I have seen the 'autoCloseDuration' option but there's really no way of knowing how much time such an action would take.

    Kindly add the feature to close the dialog after an action. For example:

    var alert = QuickAlert(options);
    if(condition) {
    alert.show();
    } else {
    if(alert.isOpen){
    alert.close();
    }
    }
    
    enhancement 
    opened by bennito254 4
  • alert stacked without an option to dismiss

    alert stacked without an option to dismiss

    this demo will explain it better, when the user try and fail again to reconnect , a new alert pops before dismissing the old one ? I'm not sure what's happening the confirm button doesn't dismiss the alert because it's creating a new alert ?

    https://user-images.githubusercontent.com/13587810/187587173-94d878e1-ed95-4728-a5cf-612887960a6d.mp4

    opened by thorizer 3
  • Navigator inside QuickAlert Dialog does not work

    Navigator inside QuickAlert Dialog does not work

    https://stackoverflow.com/questions/74840292/navigator-inside-quickalert-dialog-does-not-work

    In flutter, I have this Screen deep down in my MaterialApp's widget tree:

    class ItemDetailsScreen extends StatefulWidget {
      ItemDetailsScreen();
    
      @override
      State<ItemDetailsScreen> createState() => _ItemDetailsScreenState();
    }
    
    class _ItemDetailsScreenState extends State<ItemDetailsScreen> {
    
     @override
      Widget build(BuildContext context) {
    
        bleController.onBleStatusChange('box_is_open', context);
        
        return Scaffold(....
    } 
    
    Future<void> onBleStatusChange() async {
    ...
    QuickAlert.show(
            context: context,
            type: QuickAlertType.success,
            title: 'Box geöffnet!',
            text: 'Bitte entnimm jetzt das Item',
            confirmBtnText: 'Weiter',
            onConfirmBtnTap: () {
              Navigator.of(context).push(
                  MaterialPageRoute(
                      builder: (context) => const MyNextScreen())); // ERROR
            }
          );
      }
    }
    

    I get this error meassage after apping on the confirm button in the QuickAlert dialog onConfirmBtnTap:

    ======== Exception caught by scheduler library =====================================================
    The following assertion was thrown during a scheduler callback:
    'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4475 pos 12: '!_debugLocked': is not true.
    
    
    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
    In either case, please report this assertion by filing a bug on GitHub:
      https://github.com/flutter/flutter/issues/new?template=2_bug.md
    
    When the exception was thrown, this was the stack: 
    #2      NavigatorState._pushEntry (package:flutter/src/widgets/navigator.dart:4475:12)
    #3      NavigatorState.push (package:flutter/src/widgets/navigator.dart:4412:5)
    #4      GetNavigation.to (package:get/get_navigation/src/extension_navigation.dart:522:37)
    #5      BleController._navigateToTestDeviceUI.<anonymous closure> (package:flutter_starter/controllers/ble_controller.dart:177:61)
    #6      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15)
    #7      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:9)
    #8      SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1015:5)
    #9      _invoke (dart:ui/hooks.dart:148:13)
    #10     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:318:5)
    #11     _drawFrame (dart:ui/hooks.dart:115:31)
    (elided 2 frames from class _AssertionError)
    ====================================================================================================
    

    I also tried to add a small delay and to move the Navigation to a separate function:

    onConfirmBtnTap: () async {
          await Future.delayed(Duration.zero);
          _navigateToMyNextScreen();
        },
    
    ...
    
    void _navigateToMyNextScreen() {
            Navigator.of(Get.context!)
                .push(MaterialPageRoute(builder: (Get.context!) => MyNextScreen())));
    
      }
    

    But the error was the exact same. I also tried passing the BuildContext into that new separate Method instead of getting it from GetX, but it's the same error. I also tried to navigate with GetX Get.to(() => MyNextScreen()) instead of using the Navigator, but that made no difference.

    I also asked ChatGPT3, it gave a good looking response that I should separate it into a separate function, but I think that makes no sense and the error stayed the same.

    [ChatGPT]2 [ChatGPT_answer]3

    good first issue help wanted question 
    opened by grgkro 2
  • Unable to load asset

    Unable to load asset

    Try in expample app

    Another exception was thrown: Unable to load asset: packages/quickalert/assets/error.gif Error while trying to load an asset: Failed to load asset at "assets/assets/error.gif" (404) Another exception was thrown: Unable to load asset: assets/error.gif Error while trying to load an asset: Failed to load asset at "assets/assets/confirm.gif" (404) Another exception was thrown: Unable to load asset: assets/confirm.gif Error while trying to load an asset: Failed to load asset at "assets/assets/loading.gif" (404) Another exception was thrown: Unable to load asset: assets/loading.gif Error while trying to load an asset: Failed to load asset at "assets/assets/loading.gif" (404) Another exception was thrown: Unable to load asset: assets/loading.gif

    help wanted 
    opened by JanRegent 2
  • Factory constructors should be provided for each event

    Factory constructors should be provided for each event

    Hi @ItsAkashS22 ,

    Thanks for amazing package anyway, I really love it :) I would like to suggest the following improvements to this package.

    Currently, an Enum corresponding to each dialog is passed when instantiating a QuickAlert object, but this should be eliminated and a factory constructor corresponding to each dialog should be provided.

    So it's currently initialized as follows:

    QuickAlert.show(
     context: context,
     type: QuickAlertType.success,
     text: 'Transaction Completed Successfully!',
    );
    
    QuickAlert.show(
     context: context,
     type: QuickAlertType.error,
     title: 'Oops...',
     text: 'Sorry, something went wrong',
    );
    

    But I suggest like:

    QuickAlert.success(
     context: context,
     text: 'Transaction Completed Successfully!',
    );
    
    QuickAlert.error(
     context: context,
     title: 'Oops...',
     text: 'Sorry, something went wrong',
    );
    

    There are many advantages to having a factory constructor for each event. Currently, the developer must tailor the options depending on the type of dialog used, but providing a factory constructor would eliminate the need to be actively aware of the options required for each dialog :)

    Thank you.

    enhancement 
    opened by myConsciousness 1
  • Option to change background colour of Top Part

    Option to change background colour of Top Part

    Hey nice package , like title says , can we change background colour of topCard , right behind the animation part

    currently backgroundColor propery changing colour of bottom bart

    enhancement good first issue 
    opened by rohitsangwan01 1
  • Option To Set Barrier Color

    Option To Set Barrier Color

    I want the alert to be non dismissible but still able to see the app in the background, it's too dark especially in a dark mode app I'm talking about barrierColor: Colors.black.withOpacity(0.5),

    enhancement 
    opened by thorizer 1
  • Showing dialogs can be easy and better

    Showing dialogs can be easy and better

    QuickAlert.success(context: context);
    
    // or
    
    QuickAlert.success(context); // context as positional parameter
    
    QuickAlert.success(context, message: "File downloaded successfully!");
    

    instead of

    QuickAlert.show(
      context: context,
      type: QuickAlertType.success,
    );
    
    question 
    opened by topperspal 1
  • fix: fixed typo and warnings

    fix: fixed typo and warnings

    Hi @ItsAkashS22 ,

    Thanks for amazing package, I really love these dialogs!

    I have had a look at the source and found some typos, so then I have corrected :)

    enhancement 
    opened by myConsciousness 0
Releases(v1.0.1)
  • v1.0.1(Dec 2, 2022)

    banner

    QuickAlert v1.0.1 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.

    SDK

    • FLUTTER

    PLATFORM

    • ANDROID
    • IOS
    • LINUX
    • MACOS
    • WEB
    • WINDOWS

    What's Changed

    • fix: fixed typo and warnings by @myConsciousness in https://github.com/belovance/QuickAlert/pull/9

    New Contributors

    • @myConsciousness made their first contribution in https://github.com/belovance/QuickAlert/pull/9

    Full Changelog: https://github.com/belovance/QuickAlert/compare/v1.0.0...v1.0.1

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Sep 1, 2022)

    banner

    QuickAlert v1.0.0 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.

    SDK

    • FLUTTER

    PLATFORM

    • ANDROID
    • IOS
    • LINUX
    • MACOS
    • WEB
    • WINDOWS
    Source code(tar.gz)
    Source code(zip)
  • v0.0.2(Aug 1, 2022)

    banner

    QuickAlert v0.0.2 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.

    SDK

    • FLUTTER

    PLATFORM

    • ANDROID
    • IOS
    • LINUX
    • MACOS
    • WEB
    • WINDOWS
    Source code(tar.gz)
    Source code(zip)
Owner
Belovance
Belovance's products and services portfolio touches almost all people on a daily basis, across economic and social spectrums.
Belovance
A full-featured (simple message, voice, video) flutter chat application by SignalR and WebRTC

flutter_chat A full-featured (simple message, voice, video) flutter chat application by SignalR and WebRTC. Features Full Authentication service Bad r

WebDevYCH 4 Dec 11, 2022
Encode App-Dev is a open source project which contains different projects of Application development, Android development, IOS development, Flutter, Kotlin, Dart, Java, Swift etc.

HACKTOBERFEST 2022 Encode App-Dev is an open source project which contains different projects of Application development, Android development, IOS dev

null 4 Dec 4, 2022
Home app - A dynamic flutter app which can be used to generate alerts, set alarms and send sms or call someone

first_app A dynamic flutter app which can be used to generate alerts, set alarms

null 0 Apr 9, 2022
SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

SoundVolumeView that displays general information and the current volume level for all active sound components in your system, and allows you to instantly mute and unmute them

Domingo 4 Mar 4, 2022
A fully-featured Last.fm client and scrobbler with Shazam-like scrobbling, a collage generator, home screen widgets, and more!

Finale A fully-featured Last.fm client and scrobbler with Shazam-like scrobbling, a collage generator, and more! The app is available on iOS, Android,

Noah Rubin 66 Jan 5, 2023
Fully Featured Chat App Using Firebase, RiverPod and much more.

LetsChat Fully Featured Chat App Using Firebase, RiverPod and much more. LetsChat app has a beautiful responsive UI. The app includes many features li

Mateen Mehmood 94 Dec 6, 2022
A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready.

A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready. Getting started Gallery Basic usage Featu

null 2 Mar 17, 2022
A full suit Ecomm cross-platform application.

ShopApp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 4 Oct 18, 2022
A Flutter repo with a ready-to-go architecture containing flavors, bloc, device settings, json serialization and connectivity

Flutter Ready to Go A Flutter repo with a ready-to-go architecture containing flavors, bloc, device settings, json serialization and connectivity. Why

null 139 Nov 11, 2022
🚀A Flutter plugin to scanning. Ready for PDA

PDA Scanner A Flutter plugin ?? to scanning. Ready for PDA ?? github Installation Add this to your package's pubspec.yaml file: dependencies: pda_sca

Sword 51 Sep 29, 2022
Flutter drawer (dynamic ready side menu)

Flutter side menu (Drawer) Getting Started Use KFDrawer widget as Scaffold's body with items property (List<KFDrawerItem>) you should define onPressed

null 213 Dec 5, 2022
Croco: Stylized widgets ready to plug into your Flutter Web project

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Diego Romero-Lovo 1 Jul 7, 2022
A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready.

Package Rename A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready. Package Rename handles changing 30 fields

OutdatedGuy 3 Aug 24, 2022
null 1 Jan 8, 2022
Kullanmaya hazir widget cozumleri -Ready to use widget solutions

Ready to use widgets ( ???? ) Projelerimde yararlı widget çözümleri kullanıyorum ve çoğu zaman orada kalıyor. Bunları hem ben hemde sizden gelenler il

Veli Bacik 117 Dec 27, 2022
A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

Mohit Chauhan 8 Oct 3, 2022
A ready-made structure that holds HTTP requests.

A ready-made structure that holds HTTP requests. Usage import 'package:flutter/material.dart'; import 'package:uigitdev_request_holder/src/http_reques

Uigitdev 2 Oct 21, 2022
A platform for car sharing where users can book any car that suits their needs and wants for their intended journey, from the closest hosts in the community.

Getting Started This project is a starting point for a Flutter application. For help getting started with Flutter, view our online documentation, whic

Faisal Ramdan 28 Apr 29, 2022
This package give you ability to integrate with Drone API easily in any platform using Dart

Drone Dart Dart is a multi client programming language which allow you to compile and run your code on multiple platforms. Because of that we decided

Amirhossein 1 Dec 22, 2022