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.