A new Flutter package project for simple a awesome dialogs

Overview

awesome_dialog

A new Flutter package project for simple and awesome dialogs

Usage

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

import 'package:awesome_dialog/awesome_dialog.dart';

Demo

Check out https://cv.toranzo.dev/awesome_dialog for more fun.

Image

alt text

Example

AwesomeDialog(
            context: context,
            dialogType: DialogType.INFO,
            animType: AnimType.BOTTOMSLIDE,
            title: 'Dialog Title',
            desc: 'Dialog description here.............',
            btnCancelOnPress: () {},
            btnOkOnPress: () {},
            )..show();

Custom Body

If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.

AwesomeDialog(
            context: context,
            animType: AnimType.SCALE,
            dialogType: DialogType.INFO,
            body: Center(child: Text(
                    'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),),
            title: 'This is Ignored',
            desc:   'This is also Ignored',
            btnOkOnPress: () {},
                 )..show();

Custom Button

To use custom buttons, just specify the buttonOk or btnCancel widget, all text parameters icon etc will be ignored.

Dissmiss and Callback

AwesomeDialog has onDissmissCallback() and can be dissmissed at any time using dissmiss() public method.

AwesomeDialog Class

Dart attribute Datatype Description Default Value
dialogType DialogType Set DialogType example: DialogType.INFO, this create an animated Header. Null
customHeader Widget Create your own header(if this is set DiaologType is ignored.) Null
width double The maximum width of the dialog, especially useful in web flutter, or landscape mode MediaQuery.of(context).size.width.
title String Set the title of dialog. Null
desc String Set the description text of the dialog. Null
body Widget Create your own Widget for body, if this property is set title and description will be ignored. Null
context BuildContext @required Null
btnOkText String Text of positive button 'Ok'
btnOkIcon IconData Icon of positive button Null
btnOkOnPress Function Function that handle click of postive Button, closing the dialog is handled internally. Null
btnOkColor Color Color of postive Button Color(0xFF00CA71)
btnOk Widget Allows to create a custom button, if this property is different from null then btnOkText, btnOkIcon, btnOkOnPress, btnOkColor will be ignored null
btnCancelText String Text of negative button 'Cancel'
btnCancelIcon IconData Icon of negative button Null
btnCancelOnPress Function Function that handle click of negative Button, closing the dialog is handled internally. Null
btnCancelColor Color Color of negative Button Colors.red
btnCancel Widget Allows to create a custom button, if this property is different from null then btnCancelText, btnCancelIcon, btnCancelOnPress, btnCancelColor will be ignored null
buttonsBorderRadius BorderRadiusGeometry Allows to customize buttons border raidus BorderRadius.all(Radius.circular(100))
dismissOnTouchOutside bool Dissmiss dialog on touch overlay true
onDissmissCallback Function Dissmiss callback funtion Null
animType AnimType Type of dialogue enter animation AnimType.SCALE
aligment AlignmentGeometry dialogue aligment gravity Alignment.center
useRootNavigator bool Use the root navigator instead than the local. This is useful when the defaut cancel go to the previous screen instead to just close the dialog false
headerAnimationLoop bool headerAnimationLoop control the loop for animation header true
padding EdgeInsetsGeometry The padding of dialog elemets EdgeInsets.only(left: 5, right: 5),
autoHide Duration Hide the Dialog after this Duration null
keyboardAware bool Control if add or not the Padding EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom). true
dismissOnBackKeyPress bool control if AwesomeDialog is dissmisable by back button. true
buttonsBorderRadius BorderRadiusGeometry Border Radius for built in buttons. BorderRadius.all(Radius.circular(100)
buttonsTextStyle TextStyle TextStyle for built in buttons. TextStyle(color: Colors.white, fontWeight:FontWeight.w700, fontSize: 14)
showCloseIcon bool Control if close icon is appear. false
closeIcon Widget Custom closeIcon. null
dialogBackgroundColor Color custom background color for entire dialog. Theme.of(context).cardColor
borderSide BorderSide enable border en entire dialog shape null
Comments
  • Error in new Flutter 3

    Error in new Flutter 3

    ../../../../System/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' ('../../../../System/flutter/packages/flutter/lib/src/scheduler/binding.dart'). SchedulerBinding.instance?.cancelFrameCallbackWithId(_frameCallbackID); ^ ../../../../System/flutter/.pub-cache/hosted/pub.dartlang.org/flare_flutter-3.0.2/lib/flare_render_box.dart:170:28: Warning: Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes null.
    • 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('../../../../System/flutter/packages/flutter/lib/src/scheduler/binding.dart'). SchedulerBinding.instance?.scheduleFrameCallback(_beginFrame) ?? -1; ^ ../../../../System/flutter/.pub-cache/hosted/pub.dartlang.org/flare_flutter-3.0.2/lib/flare_render_box.dart:272:26: Warning: Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes null.
    • 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('../../../../System/flutter/packages/flutter/lib/src/scheduler/binding.dart'). SchedulerBinding.instance?.cancelFrameCallbackWithId(_frameCallbackID);
    opened by skylastn 8
  • Temporary remove QUESTION

    Temporary remove QUESTION

    [Breaking] Temporary remove QUESTION type header for being incompatible with rive.

    Do you have any predictions on how much you will implement the QUESTION option? My application uses it in multiple places.

    opened by fggluiz 6
  • Enable Close Icon on awesomeDialog

    Enable Close Icon on awesomeDialog

    A new key, showCloseIcon (by default false, i.e hide close icon).

    If showCloseIcon set to true, close icon will show when awesomeDialog prompt. Dialog will be dismiss if close icon trigger.

    Close icon is used in order to eliminate the crowd in buttons panel & developer can make use the limited buttons for other purposes, rather than just to close the dialog.

    opened by chenloong83 6
  • Pass function (closure) to btnOkOnPress

    Pass function (closure) to btnOkOnPress

    I have a problem passing a function to btnOkOnPress.

    In a previous version (2.1.3) I could use this code:

      static questionDialog(BuildContext context, String title, String text, Function onPress) async {
        AwesomeDialog(
    	    context: context,
    	    dialogType: DialogType.QUESTION,
    	    headerAnimationLoop: false,
    	    animType: AnimType.BOTTOMSLIDE,
    	    title: title,
    	    desc: text,
    	    buttonsTextStyle: const TextStyle(color: Colors.black),
    	    showCloseIcon: true,
    	    btnCancelText: Locale.undo.toCapitalized(),
    	    btnCancelOnPress: () {},
    	    btnOkText: Locale.OK.toCapitalized(),
    	    btnOkOnPress: onPress,
        ).show();
      }
    

    Then, inside a button, I called the previous function:

      onPressed: () async {
          await global.Utils.questionDialog(
            context,
            global.Locale.attention.toUpperCase(),
            global.Locale.confirmSaveCannotUndo,
            () async {
              ... some code ...
            }
          );
      },
    

    And all worked perfectly.

    Using the current version (2.2.1), VS Code shows an error: "The argument type 'Function' can't be assigned to the parameter type 'dynamic Function()?" (refers to 'btnOkOnPress: onPress'), so I tried to modify the function declaration:

    	static questionDialog(BuildContext context, String title, String text, Function onPress) async {
    		await AwesomeDialog(
    			... (no changes)...
    			btnOkOnPress: () async => onPress,
    		).show();
    	}
    

    The error disappeared, but the code inside 'onPress' does not run.

    What am I doing wrong?

    Thanks in advance

    opened by robman70 5
  • Feature to pass data from dialog

    Feature to pass data from dialog

    New

    • Added functionality to provide custom pop method to pass data back from dialog

    Changes

    • Added field autoDismiss set to true by default
    • If autoDismiss is false, onDissmissCallback must be provided to pop the dialog
    opened by OutdatedGuy 5
  • Shortcut for Buttons OR Focus for Buttons - Goal: desktop

    Shortcut for Buttons OR Focus for Buttons - Goal: desktop

    Hi guys, is it possible to implement shorcuts for buttons or the possibility to focus the buttons (OK and CANCEL) so the user do not need to use mouse.

    This request is for desktop environment.

    opened by alberteije 4
  • FlareHeader default in nullsafety-0 won't be hit, DialogType.INFO reversed

    FlareHeader default in nullsafety-0 won't be hit, DialogType.INFO reversed

    image As you can see, after upgrade to awesome_dialog: ^2.0.0-nullsafety.0 INFO dialog reversed.

    Warning case looks ok: image

    Changes

    case DialogType.INFO:
            return FlareActor(
              "packages/awesome_dialog/assets/flare/info2.flr",
              alignment: Alignment.center,
              fit: BoxFit.cover,
              animation: loop ? 'appear_loop' : 'appear',
              callback: (call) {},
            );
            break;
    

    on

    case DialogType.INFO:
            return FlareActor(
              "packages/awesome_dialog/assets/flare/info.flr",
              alignment: Alignment.center,
              fit: BoxFit.cover,
              animation: 'appear',
              callback: (call) {},
            );
            break;
    

    Solved problem. image

    After NNBD Default switch in FlareHeader wont be hit because DialogType can not be null, should we add DialogType.INFO and DialogType.InfoReversed ?

    opened by PcolBP 4
  • Labeled null safe, but when but unable to compile because compiler says not null safe

    Labeled null safe, but when but unable to compile because compiler says not null safe

    When I try to compile my application I get the following error

    Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

    • package:awesome_dialog

    • package:simple_animations

    • package:flare_flutter

    • package:supercharged

    • package:sa_v1_migration

    • package:flare_dart

    • package:supercharged_dart

    I looked at the Dependencies of Awesome Dialog, and found the following:

    • flare_flutter depends on flare_dart which isn't null safe and is "discontinued".

    If I remove AwesomeDialog from my dependencies and compile without it, everything runs fine.

    opened by pcelis19 4
  • Use AwesomeDialog with WillPopScope to confirm app exit

    Use AwesomeDialog with WillPopScope to confirm app exit

    This is how I did it with standard AlertDialog:

    
    return WillPopScope(
          onWillPop: _promptExit,
          child: Container() /*Remaining window layout*/
    
    Future<bool> _promptExit {
    
    return showDialog(
          context: context,
          builder: (context) => new AlertDialog(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
            title: new Text(Strings.prompt_exit_title),
            content: new Text(Strings.prompt_exit_content),
            actions: <Widget>[
              FlatButton(
                child: new Text(Strings.no),
                onPressed: () => Navigator.of(context).pop(false),
              ),
              SizedBox(height: 16),
              FlatButton(
                child: new Text(Strings.yes),
                onPressed: () => Navigator.of(context).pop(true),
              ),
            ],
          ),
        ) ??
            false;
    
    }
    

    How to do that with AwesomeDialog? I can;t see any way to put it into showDialog. Any advice?

    opened by giaur500 4
  • NoSuchMethodError: The method 'pop' was called on null. Receiver: null

    NoSuchMethodError: The method 'pop' was called on null. Receiver: null

    Hi, thank you for the amazing package :) I'm getting this error in a lot of users, but I cannot replicate it on my phone. Do you know what it can be? Non-fatal Exception: java.lang.Exception: NoSuchMethodError: The method 'pop' was called on null. Receiver: null Tried calling: pop() at AwesomeDialog._buildFancyButtonOk.<fn>(awesome_dialog.dart:178) at _AnimatedButtonState.build.<fn>(animated_button.dart:52) at GestureRecognizer.invokeCallback(recognizer.dart:184) at TapGestureRecognizer.handleTapUp(tap.dart:524) at BaseTapGestureRecognizer._checkUp(tap.dart:301) at BaseTapGestureRecognizer.handlePrimaryPointer(tap.dart:219) at PrimaryPointerGestureRecognizer.handleEvent(recognizer.dart:477) at PointerRouter._dispatch(pointer_router.dart:78) at PointerRouter._dispatchEventToRoutes.<fn>(pointer_router.dart:124) at PointerRouter._dispatchEventToRoutes(pointer_router.dart:122) at PointerRouter.route(pointer_router.dart:108) at GestureBinding.handleEvent(binding.dart:220) at GestureBinding.dispatchEvent(binding.dart:200) at GestureBinding._handlePointerEvent(binding.dart:158) at GestureBinding._flushPointerEventQueue(binding.dart:104) at GestureBinding._handlePointerDataPacket(binding.dart:88)

    opened by Lima21 4
  • Documentation Suggestion for dismissing dialog.

    Documentation Suggestion for dismissing dialog.

    I found your dialog today and overall very happy with it!

    But one thing that might help others who are new to this library.

    I wanted to be able to "dismiss" the dialog from a button in my body in the same way it does when you click the background.

    Maybe my understanding of Root Navigator is a little lacking, but when I called dissmiss() from my button it would change the "page" I was on and NOT remove the dialog from the screen.

    After digging around and "guessing" I set useRootNavigator = true and then the dissmiss() method behaved as I would expect. I'm not real clear how having a dismiss method that does not actually remove the dialog is helpful, but I think the documentation needs to be made more clear as to the meaning of useRootNavigator. Possibly true needs to be the default?

    Now it is entirely possible that I'm missing something here. But in my setup it was the only way I could seem to remove the dialog?

    opened by danhadv 4
  • DialogTypes not showing on web releases

    DialogTypes not showing on web releases

    Hi, Dialog Types like DialogType.info icons not showing on when i release the web version. But iOS or Android versions works perfectly. Even web version not have a problem on the debug mode. Am i doing something wrong?

    Thanks.

    opened by mehmetemregokberk 0
  • Changing Header Icon Color

    Changing Header Icon Color

    Hi Trying to change the header icon's color, but it seems it is not possible. the only way I can think of is using a custom header. Is there any other way?

    opened by Rahaaaa 0
  • please create dynamic close icon position

    please create dynamic close icon position

    can you make closeIcon position dynamic free set by dev?

    if (showCloseIcon!)
                Positioned(
                  right: 50.0,
                  top: 75.0,
                  child: GestureDetector(
                    onTap: () {
                      onClose.call();
                    },
                    child: closeIcon ?? const Icon(Icons.close),
                  ),
                ),
    
    opened by eggysudianto 0
  • Im having very slow performance

    Im having very slow performance

    I have implemented on my app this plugin. but everytime pop dialog shows, it takes a long time to appair and the icon doesnt load. Its very slow performance. Not user friendly.

    What can I check? My flutter version is 2.10.5

    opened by matiazar 1
Owner
Marcos Rodriguez Toranzo
Marcos Rodriguez Toranzo
A Flutter Package for easy building dialogs

Easy Dialog package helps you easily create basic or custom dialogs. For extended documentation visit project pub package. Star ⭐ this repo if you lik

Ricardo Niño 39 Oct 14, 2022
Dialog-manager - A Flutter package that allows for neater declaration, abstraction and use of customisable dialogs

flutter_dialog_manager A Flutter package that allows for neater declaration, abs

Lucky Ebere 2 Dec 28, 2022
RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter.

RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.

Ratel 362 Jan 1, 2023
An awesome Flutter package with widget extension.

jr_extension An awesome Flutter package with widget extension. Why do I want to create this lib? In SwiftUI framework created

WenJingRui 2 Sep 28, 2022
A new Flutter MaterialAlertDialog package project.

A new Flutter MaterialAlertDialog package project.Flutter package to implement animated, smiling_face_with_three_hearts Attractive, artstylish Material Dialog in Flutter easily

Ankit Patil 8 May 13, 2020
A new flutter package for collection of common popular social media widgets

Social Media Widgets - package A new flutter package for collection of common popular social media widgets Currently available widgets Snapchat screen

theboringdeveloper 34 Nov 12, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
UI Card Designs - A new Flutter application.

UI Card Designs A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Mohit rao 14 Dec 23, 2022
RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and error animations.

rounded_loading_button RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and

Chris Edgington 223 Jan 4, 2023
A Simple and easy to use flutter package for showing progress bar.

progress_dialog A Simple and easy to use flutter package for showing progress bar. #Usage Import the package import 'package:custom_progress_dialog/cu

Vikas Jilla 6 May 23, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

Hassan Ur Rahman 0 May 6, 2022
Flutter Package for Easier Creation of Home Screen Widgets

Home Widget HomeWidget is a Plugin to make it easier to create HomeScreen Widgets on Android and iOS. HomeWidget does not allow writing Widgets with F

Anton Borries 405 Dec 31, 2022
A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

account_selector A Flutter package which provides helper widgets for selecting single or multiple account/user from a list Supported Dart Versions Dar

Harpreet Singh 49 Oct 7, 2021
Flutter package: Similar to a ListView, but lets you programmatically jump to any item, by index.

indexed_list_view Similar to a ListView, but lets you programmatically jump to any item, by index. The index jump happens instantly, no matter if you

Marcelo Glasberg 244 Dec 27, 2022
A Styled Toast Flutter package.

flutter_styled_toast A Styled Toast Flutter package. You can highly customize toast ever. Beautify toast with a series of animations and make toast mo

null 67 Jan 8, 2023
A package for flutter to use alert and toast within one line code.

easy_alert A package for flutter to use alert and toast within one line code. Getting Started Add easy_alert: to your pubspec.yaml, and run flutt

null 34 Jun 25, 2021
Flutter package: Define a theme (colors, text styles etc.) as static const values which can be changed dynamically.

Flutter package: Define a theme (colors, text styles etc.) as static const values which can be changed dynamically. Also comes with useful extensions to create text styles by composition.

Marcelo Glasberg 21 Jan 2, 2023
flutter commons package

Commons Commons Flutter package can used for Flutter Android and IOS applications. https://pub.dev/packages/commons example/lib/main.dart Includes Ale

Arbaz Mateen 43 Dec 21, 2022