ndialog 4.1.1+1

Custom native dialog style with blur background, popup animation and ProgressDialog.

NDialog 4.x

       

Custom native dialog style with blur background, popup animation and ProgressDialog.

Not only helps you display dialog with a blurred background, NDialog is here to help you do a lot of things. for example, with NDialog you can display ProgressDialog to user once until it meets the end of Future!

First of all, let's leave the old style with showDialog(blablabla), with NDialog i provide dialog extensions, you can simply call .show(context) at the end all of your dialog and let the magic work!

There are 2 types of dialogs, they are Dialog (popup dialog) and ProgressDialog.

Dialog

In Dialog, there are 3 types, they are NDialog, NAlertDialog, ZoomDialog.

NDialog

Is a raw dialog where you can view them right away without anything else

  await NDialog(
    dialogStyle: DialogStyle(titleDivider: true),
    title: Text("Hi, This is NDialog"),
    content: Text("And here is your content, hoho... "),  
    actions: <Widget>[
      FlatButton(child: Text("You"),onPressed: () {}),
      FlatButton(child: Text("Are"),onPressed: () {}),
      FlatButton(child: Text("Awesome"),onPressed: () {}),
    ],
  ).show(context);

NAlertDialog

Is a dialog where you can directly set the background attributes without be wrapped by DialogBackground and you can simply display them.

  await NAlertDialog(
    dialogStyle: DialogStyle(titleDivider: true),
    title: Text("Hi, This is NAlertDialog"),
    content: Text("And here is your content, hoho... "), 
    actions: <Widget>[
      FlatButton(child: Text("You"),onPressed: () {}),
      FlatButton(child: Text("Are"),onPressed: () {}),
      FlatButton(child: Text("Awesome"),onPressed: () {}),
    ],
  ).show(context);

ZoomDialog

Is a dialog that you can zoom on it, you can zoom all type of widget on this dialog, simplye write this code and boom, there you go!

  await ZoomDialog(
    zoomScale: 5,
    child: Container(
      child: Text("Zoom me!"),
      color: Colors.white,
      padding: EdgeInsets.all(20),
    ),
  ).show(context);

Progress Dialog

In ProgressDialog, there are 2 types, they are ProgressDialog and CustomProgressDialog.

ProgressDialog

Will display the ProgressDialog with Android native style.

  ProgressDialog progressDialog = ProgressDialog(context, 
    message:Text("This is the message"), 
    title:Text("This is the title")
  );

  //You can set Message using this function
  progressDialog.setTitle(Text("Loading"));
  progressDialog.setMessage(Text("Please Wait, Injecting your phone with my virus"));
  progressDialog.show();

  await Future.delayed(Duration(seconds: 5));

  //Progress Dialog already show? don't worry, you can change the message :D
  progressDialog.setTitle(Text("Just Kidding"));
  progressDialog.setMessage(Text("I mean, virus of love :*"));

  await Future.delayed(Duration(seconds: 5));

  progressDialog.dismiss();

CustomProgressDialog

Will display a progress dialog with customizable widgets

  CustomProgressDialog progressDialog = CustomProgressDialog(context,blur: 10);

  ///You can set Loading Widget using this function
  progressDialog.setLoadingWidget(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red)));
  progressDialog.show();

  await Future.delayed(Duration(seconds: 5));

  //Progress Dialog already show? don't worry, you can change the loading widget :D
  progressDialog.setLoadingWidget(null);

  await Future.delayed(Duration(seconds: 5));

  progressDialog.dismiss();

Show Progress Dialog Once with .future()

This is what I'm talking about, Each Progress Dialog has a .future(context) static function, which will help you display the progress dialog once until Future is completed!

///ProgressDialog
await ProgressDialog.future(
  context, 
  future: Future.delayed(Duration(seconds: 5), () {
    return "HIYAAA";
  }),
  message: Text("Please Wait"),
  cancelText: Text("Batal"),
  title: Text("Loging in"),
)

///CustomProgressDialog
await CustomProgressDialog.future(
  context,
  future: Future.delayed(Duration(seconds: 5), () {
    return "WOHOOO";
  }),
  loadingWidget: Center(
    child: Container(
      alignment:Alignment.center, 
      child:CircularProgressIndicator(),
    ),
  ),
  backgroundColor: Colors.blue.withOpacity(.5),
)

Future Extensions

Now you can show a dialog on every futures by simply add a single code.

  //Make sure you import ndialog to call extensions function
  import 'package:ndialog/ndialog.dart';

  ...


  Future.delayed(Duration(seconds: 3)).showProgressDialog(context, title: Text("This is just an ordinary loading"), message: Text("This is fastest and coolest way to show a dialog"));

  //or
  Future.delayed(Duration(seconds:3)).showCustomProgressDialog(context);

Dialog Extensions!

You can simply call show(context) at the end of Flutter's built-in dialogs.

  //Make sure you import ndialog to call extensions function
  import 'package:ndialog/ndialog.dart';

  ...

  AlertDialog( ... ).show(context);
  SimpleDialog( ... ).show(context);
  Dialog( ... ).show(context);
  CupertinoAlertDialog( ... ).show(context);

DialogBackground

You can use DialogBackground to create your own custom dialog and display them easily, you can also change the barrierColor / background color and add little bit blur effects there.

Note : BlurDialogBackground is depreceted, use DialogBackground instead!

  await DialogBackground(
    dialog: AlertDialog(
      title: Text("Alert Dialog"),
      content: Text("Wohoo.. This is ordinary AlertDialog with Blur background"),
      actions: <Widget>[
        FlatButton(child: Text("You")onPressed: () {}),
        FlatButton(child: Text("Are")onPressed: () {}),
        FlatButton(child: Text("Awesome")onPressed: () {}),
      ],
    ),
  ).show(context); 

Dialog Transition

Now you can show Dialog(Flutter native dialog included) with animated transition, by simply write

yourDialog.show(context, transitionType: DialogTransitionType.Bubble);

Choose your customized transition and show them right away!

Screenshot