Dialog Widget

CustomDialog

CustomDialog is a flexible and reusable dialog widget designed for modals, confirmations, forms, previews, and contextual interactions in FlutKit dashboard UI kits.
It supports custom content, action buttons, multiple animation styles, fullscreen mode, and fine-grained layout control.

Common Use Cases

• Confirmation dialogs (delete, logout, submit)
• Form dialogs (create/edit data)
• Detail previews (task, user, invoice, attachment)
• Alerts with rich content
• Fullscreen modals for complex workflows
• Animated dialogs for improved UX feedback

Constructor

CustomDialog({
  Key? key,
  double width = 480,
  double height = 480,
  required Widget content,
  List<Widget>? actionButtons,
  bool showCloseButton = false,
  bool isDismissible = true,
  bool isFullScreen = false,
  DialogAnimation animation = DialogAnimation.none,
  MainAxisAlignment? actionAlignment = MainAxisAlignment.end,
  EdgeInsets? contentPadding,
})

CustomDialog({
  Key? key,
  double width = 480,
  double height = 480,
  required Widget content,
  List<Widget>? actionButtons,
  bool showCloseButton = false,
  bool isDismissible = true,
  bool isFullScreen = false,
  DialogAnimation animation = DialogAnimation.none,
  MainAxisAlignment? actionAlignment = MainAxisAlignment.end,
  EdgeInsets? contentPadding,
})

Parameters

width

Sets the dialog width (default: 480).
Ignored when isFullScreen is true.

height

Sets the dialog height (default: 480).
Useful for content-heavy dialogs.

content (required)

The main widget displayed inside the dialog.
Can be any widget: Text, Form, Column, ListView, custom UI, etc.

actionButtons

A list of widgets (usually buttons) displayed at the bottom of the dialog.

Example:

actionButtons: [
  CustomOutlinedButton(...),
  CustomElevatedButton(...),
]

actionButtons: [
  CustomOutlinedButton(...),
  CustomElevatedButton(...),
]

showCloseButton

If true, displays a close (X) button at the top-right corner of the dialog.

isDismissible

Controls whether the dialog can be closed by tapping outside.
Set to false for critical confirmations or blocking flows.

isFullScreen

If true, the dialog expands to fullscreen.
Recommended for complex forms or mobile layouts.

animation

Defines the dialog entrance animation.

Supported values:

enum DialogAnimation {
  none,
  fadeInRight,
  fadeInLeft,
  fadeInTop,
  fadeInBottom,
  flip,
  zoom,
}

enum DialogAnimation {
  none,
  fadeInRight,
  fadeInLeft,
  fadeInTop,
  fadeInBottom,
  flip,
  zoom,
}

actionAlignment

Controls the alignment of actionButtons.

Common values:

• MainAxisAlignment.start
• MainAxisAlignment.center
• MainAxisAlignment.end (default)

contentPadding

Custom padding for the dialog content area.
Useful when embedding edge-to-edge layouts or scroll views.

Basic Example

CustomDialog(
  content: Text('Are you sure you want to delete this item?'),
  actionButtons: [
    CustomOutlinedButton(
      kText: 'Cancel',
      outlineColor: kSecondaryColor,
      onPressed: () => Navigator.pop(context),
    ),
    CustomElevatedButton(
      kText: 'Delete',
      bgColor: kErrorColor,
      kTextColor: Colors.white,
      onPressed: () {},
    ),
  ],
)

CustomDialog(
  content: Text('Are you sure you want to delete this item?'),
  actionButtons: [
    CustomOutlinedButton(
      kText: 'Cancel',
      outlineColor: kSecondaryColor,
      onPressed: () => Navigator.pop(context),
    ),
    CustomElevatedButton(
      kText: 'Delete',
      bgColor: kErrorColor,
      kTextColor: Colors.white,
      onPressed: () {},
    ),
  ],
)

Dialog with Animation

CustomDialog(
  animation: DialogAnimation.fadeInBottom,
  showCloseButton: true,
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('Create New Project'),
      SizedBox(height: 16),
      TextField(),
    ],
  ),
)

CustomDialog(
  animation: DialogAnimation.fadeInBottom,
  showCloseButton: true,
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('Create New Project'),
      SizedBox(height: 16),
      TextField(),
    ],
  ),
)

Fullscreen Dialog Example

CustomDialog(
  isFullScreen: true,
  content: ProjectCreateForm(),
)

CustomDialog(
  isFullScreen: true,
  content: ProjectCreateForm(),
)

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Dialogs section.

Base UI → Dialogs

Base UI → Dialogs

Best Practices

• Use isDismissible = false for destructive or irreversible actions.
• Prefer subtle animations (fadeInBottom, zoom) for enterprise dashboards.
• Keep dialog content focused; move complex flows to fullscreen dialogs.
• Align action buttons consistently (primary action on the right).
• For forms, wrap content in SingleChildScrollView if height is dynamic.

Summary

CustomDialog provides a powerful, animation-ready modal system for FlutKit dashboards.
It balances flexibility and consistency by allowing fully custom content while maintaining a standardized dialog experience across applications.

Use it whenever you need user focus, confirmation, or contextual interaction without navigating away from the current screen.