Flutter modal dialog
A simple package with simple modal dialogs for people that don't want to create their own dialogs.
Features
- Little customization required;
- Simple dialog to show a simple message;
- Detailed dialog can at the same time hide those nasty details and still deliver them if needed;
- Waiting dialog to show something while the application proccesses;
Getting started
For a manual installation
In the pubspec.yaml
of your flutter application, add the following:
dependencies:
modal_dialog: <latest_version>
You can also add it through pub.dev with the following command:
flutter pub add flutter_modal_dialog
Usage
ModalDialog.simple
ModalDialog.simple
is a dialog that shows a single message, it should be short, like "Data was sent" or "Finished uploading", it has a single button that will dismiss the dialog.
ModalDialog.simple(
context: context,
title: const ModalTitle(
text: "This is a short message",
),
button: const ModalButton(text: "Alright!"),
);
Preview
ModalDialog.detailed
ModalDialog.detailed
is the reason I created this package, to have a dialog that would show a title, a message and a hidden message that the user could tap and provide detailed information on why an error was thrown.
ModalDialog.detailed(
context: context,
title: const ModalTitle(text: "This is a short message"),
message: "This is larger message that explains the title",
detail: const ModalDetail(
visibleText: "Detailed message",
hiddenText: "This is a detailed message that contains more "
"information about the title and message",
),
button: const ModalButton(text: "Alright!"),
);
Preview
Details hidden:
Details shown:
ModalDialog.waiting
ModalDialog.waiting
is a dialog without buttons. It was created to be used while the application processes something in the background and after that code gets executed, the dialog should be dismissed by the application as well.
ModalDialog.waiting(
context: context,
title: const ModalTitle(text: "Processing"),
message: "Please wait while we process your request",
);
Future.delayed(const Duration(seconds: 5), () {
Navigator.pop(context);
});
Preview
ModalDialog.confirmation
ModalDialog.confirmation
will show a dialog with two buttons with Yes and No options.
ModalDialog.confirmation(
context: context,
title: const ModalTitle(text: "Please confirm"),
message: "It's a simple Yes/No question",
confirmButton: const ModalButton(text: "true"),
);
Preview
Customization
For now you can customize the colors of titles and buttons. I'll provide more customization in the near future but I still aim to create a standardized dialog that you can use effortlessly.
Additional information
This package is still in early development, things might change if I find it necessary. If you found any bugs, have any suggestions or want to contribute, feel free to open a PR and I'll gladly take a look into it.