modern_dialog 1.2.5

Modern custom dialog with simple implementation. Adaptive to Android & IOS.

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