Panara Dialogs

Pub Version GitHub

Panara Dialogs is a UI Kit for Dialog comes with 2 types of dialogs - Info Dialog & Confirmation Dialog both comes with 4 different variants as shown in below screenshots. with 6 different animations.

Preview

PanaraInfoDialog

successnormalwarningerror

PanaraConfirmDialog

successnormalwarningerror

Getting started

Add the dependency in pubspec.yaml:


dependencies:
    panara_dialogs: ^0.1.3

Usage

Then you just have to import the package with


import 'package:panara_dialogs/panara_dialogs.dart';

Here is how you can use PanaraInfoDialog in your flutter project.


PanaraInfoDialog.show(
    context, 
    title: "Hello",
    message: "This is the PanaraInfoDialog",
    buttonText: "Okay",
    onTapDismiss: () {
        Navigator.pop(context);
    },
    panaraDialogType: PanaraDialogType.normal,
    barrierDismissible: false, // optional parameter (default is true)
);

Properties of PanaraInfoDialog

PropertyTypevalue
imagePathStringpath to your local assets image
titleStringany string value
messageStringany string value
buttonTextStringany string value
onTapDismissvoid Function()function to decide what will happen onTap
panaraDialogTypePanaraDialogTypesuccess, normal, warning, error, custom
colorColordefine your own color, by selecting panaraDialogType: PanaraDialogType.custom
textColorColordefine your own text color
buttonTextColorColordefine your own button text color
marginEdgeInsetsdefine margin
paddingEdgeInsetsdefine padding
noImageboolIf you don't want any image set it to true. it's false by default

And Here is how you can use PanaraConfirmDialog in your flutter project.


PanaraConfirmDialog.show(
    context, 
    title: "Hello",
    message: "This is the PanaraConfirmDialog",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel",
    onTapCancel: () {
        Navigator.pop(context);
    },
    onTapConfirm: () {
        Navigator.pop(context);
    },
    panaraDialogType: PanaraDialogType.normal,
    barrierDismissible: false, // optional parameter (default is true)
);

Properties of PanaraConfirmDialog

PropertyTypevalue
imagePathStringpath to your local assets image
titleStringany string value
messageStringany string value
confirmButtonTextStringany string value
cancelButtonTextStringany string value
onTapConfirmvoid Function()function to decide what will happen onTap confirm
onTapCancelvoid Function()function to decide what will happen onTap cancel
panaraDialogTypePanaraDialogTypesuccess, normal, warning, error, custom
colorColordefine your own color, by selecting panaraDialogType: PanaraDialogType.custom
textColorColordefine your own text color
buttonTextColorColordefine your own button text color
marginEdgeInsetsdefine margin
paddingEdgeInsetsdefine padding
noImageboolIf you don't want any image set it to true. it's false by default

Animations for Both Dialogs

This are static methods for both Dialog Class.

methodAnimation
showAnimatedFromLeft()slide animation from left
showAnimatedFromRight()slide animation from right
showAnimatedFromTop()slide animation from top
showAnimatedFromBottom()slide animation from bottom
showAnimatedGrow()grow animation from center
showAnimatedShrink()shrink animation from center

Feedback

Please feel free to give me any feedback or file issue helping support this plugin !

Libraries

panara_dialogs