Last updated:
0 purchases
modern dialog
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"),
);
copied to clipboard
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
copied to clipboard
Info Dialog #
ModernDialog.showInfo(
context,
content: const Text("You need to know this!"),
);
copied to clipboard
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,
copied to clipboard
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"),
);
copied to clipboard
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,
copied to clipboard
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"),
),
],
);
copied to clipboard
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,
copied to clipboard
Custom Dialog #
ModernDialog.showCustom(
context,
//replace with your custom widget
view: const Text("Add any view you would like"),
);
copied to clipboard
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,
copied to clipboard
🧱 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
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.