awesome_dialog 0.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

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

Image #

alt text

Example #

AwesomeDialog(context: context,
            dialogType: DialogType.INFO,
            animType: AnimType.BOTTOMSLIDE,
            tittle: '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),
                  ),),
            tittle: '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 attributeDatatypeDescriptionDefault Value
dialogTypeDialogTypeSet DialogType example: DialogType.INFO, this create an animated Header.Null
customHeaderWidgetCreate your own header(if this is set DiaologType is ignored.)Null
titleStringSet the title of dialog.Null
descStringSet the description text of the dialog.Null
bodyWidgetCreate your own Widget for body, if this property is set title and description will be gnored.Null
contextBuildContext@requiredNull
btnOkTextStringText of positive button'Ok'
btnOkIconIconDataIcon of positive buttonNull
btnOkOnPressFunctionFunction that handle click of postive Button, closing the dialog is handled internally.Null
btnOkColorColorColor of postive ButtonColor(0xFF00CA71)
btnOkWidgetAllows to create a custom button, if this property is different from null then btnOkText, btnOkIcon, btnOkOnPress, btnOkColor will be ignorednull
btnCancelTextStringText of negative button'Cancel'
btnCancelIconIconDataIcon of negative buttonNull
btnCancelOnPressFunctionFunction that handle click of negative Button, closing the dialog is handled internally.Null
btnCancelColorColorColor of negative ButtonColors.red
btnCancelWidgetAllows to create a custom button, if this property is different from null then btnCancelText, btnCancelIcon, btnCancelOnPress, btnCancelColor will be ignorednull
dismissOnTouchOutsideboolDissmiss dialog on touch overlaytrue
onDissmissCallbackFunctionDissmiss callback funtionNull
animTypeAnimTypeType of dialogue enter animationAnimType.SCALE
aligmentAlignmentGeometrydialogue aligment gravityAlignment.center
useRootNavigatorboolUse the root navigator instead than the local. This is useful when the defaut cancel go to the previous screen instead to just close the dialogfalse
headerAnimationLoopboolheaderAnimationLoop control the loop for animation headertrue
paddingEdgeInsetsGeometryThe padding of dialog elemetsEdgeInsets.only(left: 5, right: 5),

[0.1.3] - 19/02/2020. #

  • Fix tiny bug after features of version 0.1.2

[0.1.2] - 19/02/2020. #

  • Upgrade dependencies
  • Remove spacing for buttons if no buttons are especified.
  • Added prop padding with default value EdgeInsets.only(left: 5, right: 5). this is not breaking change since this is the padding used on eraly version.

[0.1.1] - 15/01/2020. #

  • Added prop headerAnimationLoop.

[0.1.0] - 03/12/2019. #

  • Fix a bug when there is only a single button, removing unwanted space

[0.0.5] - 25/11/2019. #

  • Added isDense property
  • Added aligment property

[0.0.4] - 18/11/2019. #

  • Change default color to Theme.of(context).cardColor

[0.0.3] - 07/11/2019. #

  • Fix a Bug when using PressEvent() for Navigation.

[0.0.2] - 28/10/2019. #

  • Formating text and enchancing description.

[0.0.1] - 28/10/2019. #

  • Initial release.

example/lib/main.dart

import 'package:awesome_dialog/animated_button.dart';
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:fancy_dialog_example/routes.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fancy Dialog Example',
      initialRoute: '/',
      onGenerateRoute: RouteGenerator.generateRoute,
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({
    Key key,
  }) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  showDebugPrint() {
    debugPrint('Print from Callback Function');
  }

  _slideMainPage(BuildContext context) {
    showDebugPrint();
    Navigator.of(context).pushNamed(RouteGenerator.testPage);
  }

  void showAlertDialogOnOkCallback(String title, String msg,
      DialogType dialogType, BuildContext context, VoidCallback onOkPress) {
    AwesomeDialog(
      context: context,
      animType: AnimType.TOPSLIDE,
      dialogType: dialogType,
      tittle: title,
      desc: msg,
      btnOkIcon: Icons.check_circle,
      btnOkColor: Colors.green.shade900,
      btnOkOnPress: onOkPress,
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Fancy Dialog Example'),
        ),
        body: Center(
            child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            children: <Widget>[
              AnimatedButton(
                text: 'Issue Dialog',
                pressEvent: () {
                  showAlertDialogOnOkCallback(
                      'Verified',
                      'Sign In Success!, prees Ok to navigate.',
                      DialogType.SUCCES,
                      context,
                      () => _slideMainPage(context));
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Info Dialog',
                pressEvent: () {
                  AwesomeDialog(
                          context: context,
                          headerAnimationLoop: false,
                          dialogType: DialogType.INFO,
                          animType: AnimType.BOTTOMSLIDE,
                          tittle: 'INFO',
                          desc:
                              'Dialog description here..................................................',
                          btnCancelOnPress: () {},
                          btnOkOnPress: showDebugPrint)
                      .show();
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Info Dialog Without buttons',
                pressEvent: () {
                  AwesomeDialog(
                    context: context,
                    headerAnimationLoop: false,
                    dialogType: DialogType.INFO,
                    animType: AnimType.BOTTOMSLIDE,
                    tittle: 'INFO',
                    desc: 'Dialog de.',
                  ).show();
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Warning Dialog',
                color: Colors.orange,
                pressEvent: () {
                  AwesomeDialog(
                          context: context,
                          dialogType: DialogType.WARNING,
                          headerAnimationLoop: false,
                          animType: AnimType.TOPSLIDE,
                          tittle: 'Warning',
                          desc:
                              'Dialog description here..................................................',
                          btnCancelOnPress: () {},
                          btnOkOnPress: () {})
                      .show();
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Error Dialog',
                color: Colors.red,
                pressEvent: () {
                  AwesomeDialog(
                          context: context,
                          dialogType: DialogType.ERROR,
                          animType: AnimType.RIGHSLIDE,
                          headerAnimationLoop: false,
                          tittle: 'Error',
                          desc:
                              'Dialog description here..................................................',
                          btnOkOnPress: () {},
                          btnOkColor: Colors.red)
                      .show();
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Succes Dialog',
                color: Colors.green,
                pressEvent: () {
                  AwesomeDialog(
                      context: context,
                      animType: AnimType.LEFTSLIDE,
                      headerAnimationLoop: false,
                      dialogType: DialogType.SUCCES,
                      tittle: 'Succes',
                      desc:
                          'Dialog description here..................................................',
                      btnOkOnPress: () {
                        debugPrint('OnClcik');
                      },
                      btnOkIcon: Icons.check_circle,
                      onDissmissCallback: () {
                        debugPrint('Dialog Dissmiss from callback');
                      }).show();
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Custom Body Dialog',
                color: Colors.blueGrey,
                pressEvent: () {
                  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),
                      ),
                    ),
                    tittle: 'This is Ignored',
                    desc: 'This is also Ignored',
                  ).show();
                },
              ),
              SizedBox(
                height: 16,
              ),
              AnimatedButton(
                text: 'Custom Buttons Dialog',
                color: Colors.brown,
                pressEvent: () {
                  AwesomeDialog(
                    context: context,
                    animType: AnimType.SCALE,
                    customHeader: Icon(
                      Icons.face,
                      size: 50,
                    ),

                    tittle: 'This is Custom',
                    desc: 'This is custom button and header',
                    btnOk: FlatButton(
                      child: Text('Custom Button'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    //this is ignored
                    btnOkOnPress: () {},
                  ).show();
                },
              ),
            ],
          ),
        )));
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  awesome_dialog: ^0.1.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:awesome_dialog/awesome_dialog.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
93
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flare_flutter ^2.0.1 2.0.1
flutter 0.0.0
simple_animations ^1.3.6 1.3.11
Transitive dependencies
collection 1.14.11 1.14.12
flare_dart 2.3.3
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test