Modern custom dialog with simple implementation. Adaptive to Android, IOS, and all platforms.

. . .

🎯 Features

  • Simple implementation
  • Adaptive for Android & IOS
  • Various ready-to-use layouts
  • Full customization

📦 Usage

Standard Dialog

ModernDialog.showStandard(
    context,
    title: "Title",
    content: const Text("description"),
    buttonTitle: "Save",
    onAccept: () => print("do sometime"),
);
More Customization 
    // Show small icon indicator at the top
    icon: const Icon(Icons.phone_android),
    // Custom main button color
    mainButtonColor: Colors.blue,
    // Custom discard button color
    cancelButtonColor: Colors.red,
    // Do something when you discard the dialog
    onCancel: (){},
    // Change the default cancel button title
    cancelButtonTitle: "",
    // Allow dialog to be dismissible
    dismissibleDialog: true,
    // Change the background color of dialog (Only Android)
    backgroundColor: Colors.orange,
    // Disable the default tint color of material design 3 (Only Android). 
    disableTintColor: true,
    // Close dialog on main button by default
    shouldCloseOnMainButton: true

Info Dialog

ModernDialog.showInfo(
    context,
    content: const Text("You need to know this!"),
);
More Customization 
    // Add a title
    title: "Title",
    // Custom main button title
    buttonTitle: "Save",
    // Custom main button color
    mainButtonColor: Colors.red,
    // Allow dialog to be dismissible
    dismissibleDialog: true,
    // Change background color (Only in Android)
    backgroundColor: Colors.grey,
    // Disable the default tint color (Only in Android)
    disableTintColor: true,

Trailing Action Dialog

Use this when you need a dialog with two important action buttons

ModernDialog.showTrailingAction(
    context,
    content: const Text("This a dialog showing a trailing action button"),
    buttonTitle: 'Save',
    onAccept: () => print("do sometime"),
  
    trailingButtonTitle: "Open Settings",
    onTrailingPressed: () => print("do sometime"),
);
More Customization 
    // Add a title
    title: "Title",
    // Custom main button color
    mainButtonColor: Colors.red,
    // Custom trailing button color
    trailingButtonColor: Colors.red,
    // Allow dialog to be dismissible
    dismissibleDialog: true,
    // Change background color (Only in Android)
    backgroundColor: Colors.grey,
    // Disable the default tint color (Only in Android)
    disableTintColor: true,

Vertical Dialog

Dialog with buttons aligned vertically. Here you can add a button by using the DialogButton class made for you.

ModernDialog.showVerticalDialog(
    context,
    content: const Text("description"),

    // your custom buttons
    buttons: [
      DialogButton(
        title: "Discard",
        onPressed: () => print("do sometime"),
        color: Colors.red,
      ),
    
      DialogButton(
        title: "Allow all changes",
        onPressed: () => print("do sometime"),
      ),
    ],
);
More Customization 
    // Add an icon
    icon: const Icon(Icons.ac_unit),
    // Add a title
    title: "Title",
    // Allow dialog to be dismissible
    dismissibleDialog: true,
    // Change background color (Only in Android)
    backgroundColor: Colors.grey,
    // Disable the default tint color (Only in Android)
    disableTintColor: true,

Custom Dialog

ModernDialog.showCustom(
    context,
    //replace with your custom widget
    view: const Text("Add any view you would like"),
);
More Customization 
    // Change defualt radius
    borderRadius: 70,
    // Disable inner padding
    disablePadding: true,
    // Allow dialog to be dismissible
    dismissibleDialog: true,
    // Change background color (Only in Android)
    backgroundColor: Colors.grey,
    // Disable the default tint color (Only in Android)
    disableTintColor: true,

🧱 Parameters

Name Description Data type Default value
icon icon showing at the top center Widget -
title Dialog's title String -
content Widget showing the dialog's content Widget -
buttonTitle Function that let you build the group separator widget String -
onAccept Function to handle main button click Function() -
onCancel Perform an action on closing the dialog Function() -
cancelButtonTitle Cancel button title String "Cancel"
cancelButtonColor Cancel button color Color -
mainButtonColor Main button color Color ColorScheme.primary
shouldCloseOnMainButton Close the dialog when pressing the main button. bool true
dismissibleDialog Allow dialog to be dismissible. bool true
backgroundColor Dialog's background color. (Only Android) Color white
disableTintColor Disables the color tint applied on the background color. (Only Android) bool false

Vertical Dialog

Name Description Data type Default value
buttons Custom button for the vertical dialog. List < DialogButton > -

Trailing Dialog

Name Description Data type Default value
trailingButtonTitle Text for the trailing button. (secondary button) String -
onTrailingPressed Handle trailing button press. Function() -
trailingButtonColor Custom trailing button color. Color -

Custom Dialog

Name Description Data type Default value
view Widget for the the Custom Dialog Widget -
borderRadius override the default dialog padding Widget -
disablePadding Disable the dialog's default padding Widget false
backgroundColor Dialog's background color. (Only Android) Color white
disableTintColor Disables the color tint applied on the background color. (Only Android) bool false

Libraries

dialogs/custom
dialogs/info
dialogs/standard
dialogs/trailing_action
dialogs/vertical
modern_dialog