NDialog 4.x
Customize your dialog's style much easier with NDialog, animate the show transition, or show the progress dialog most simply.
Wonders how the result looks like? Click here for web demo or here for Android APKs demo
Anyway, not only helps you display a 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 the user once until it meets the end of Future!
First of all, let's leave the old style with showDialog(...), with NDialog I provide dialog extensions, you can simply call .show(context) at the end of 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!
