ndialog 4.2.1 icon indicating copy to clipboard operation
ndialog: ^4.2.1 copied to clipboard

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

NDialog 4.x #

Fork  Star  Watches  Get the library  Example

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

  NDialog(
    dialogStyle: DialogStyle(titleDivider: true),
    title: Text("NDialog"),
    content: Text("This is NDialog's content"),
    actions: <Widget>[
      TextButton(child: Text("Okay"), onPressed: () => Navigator.pop(context)),
      TextButton(child: Text("Close"), onPressed: () => Navigator.pop(context)),
    ],
  ).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.

  NAlertDialog(
    dialogStyle: DialogStyle(titleDivider: true),
    title: Text("NAlertDialog"),
    content: Text("This is NAlertDialog's content"),
    actions: <Widget>[
      TextButton(child: Text("Okay"), onPressed: () => Navigator.pop(context)),
      TextButton(child: Text("Close"), onPressed: () => Navigator.pop(context)),
    ],
  ).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!

  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,
    blur: 10,
    title: Text("Title of ProgressDialog"),
    message: Text("Content of ProgressDialog"),
    onDismiss: () => print("Do something onDismiss"),
  );
  progressDialog.show();

  //Set loading with red circular progress indicator and change the title and message
  await Future.delayed(Duration(seconds: 5));
  progressDialog.setLoadingWidget(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red)));
  progressDialog.setTitle(Text("ProgressDialog Title changed"));
  progressDialog.setMessage(Text("It will change again after 5 seconds"));

  //Show dialog
  progressDialog.show();

  //After 5 seconds, change the title, message and loading widget to null (default widget is CircularProgressIndicator)
  await Future.delayed(Duration(seconds: 5));
  progressDialog.setLoadingWidget(null);
  progressDialog.setMessage(Text("ProgressDialog will dismiss after 5 seconds"));
  progressDialog.setTitle(Text("Last changes"));

  //After 5 seconds, dismiss the dialog
  await Future.delayed(Duration(seconds: 5));
  progressDialog.dismiss();

CustomProgressDialog #

Will display a progress dialog with customizable widgets

  CustomProgressDialog progressDialog = CustomProgressDialog(
    context,
    blur: 10,
    onDismiss: () => print("Do something onDismiss"),
  );
  //Set loading with red circular progress indicator
  progressDialog.setLoadingWidget(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red)));

  //Show dialog
  progressDialog.show();

  //After 5 seconds, change the loading widget to null (default widget is CircularProgressIndicator)
  await Future.delayed(Duration(seconds: 5));
  progressDialog.setLoadingWidget(null);

  //After 5 seconds, dismiss the dialog
  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
  ProgressDialog.future(
    context,
    title: Text("ProgressDialog.future()"),
    message: Text("This will finis after 5 seconds"),
    future: Future.delayed(Duration(seconds: 5), () => "The end of future (5 seconds)"),
    onProgressError: (error) => print("Do something onProgressError"),
    onProgressFinish: (data) => print("Do something onProgressFinish"),
    onDismiss: () => print("Dismissed"),
  ).then((value) => print(value));

  ///CustomProgressDialog
  CustomProgressDialog.future(
    context,
    future: Future.delayed(Duration(seconds: 5), () => "The end of future (5 seconds)"),
    onProgressError: (error) => print("Do something onProgressError"),
    onProgressFinish: (data) => print("Do something onProgressFinish"),
    onDismiss: () => print("Dismissed"),
  ).then((value) => print(value));

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("Title of ProgressDialog"),
    message: Text("This dialog will be close after 3 seconds"),
  );
  //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!

  DialogBackground(
    blur: 5,
    dialog: AlertDialog(
      title: Text("NAlert Dialog"),
      content: Text("NAlertDialog with Blur background"),
      actions: <Widget>[
        TextButton(child: Text("Okay"), onPressed: () => Navigator.pop(context)),
        TextButton(child: Text("Close"), onPressed: () => Navigator.pop(context)),
      ],
    ),
  ).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 #

Example

170
likes
140
pub points
96%
popularity

Publisher

verified publisher iconnizwar.dev

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

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on ndialog