Dialog

A Dialog is a focused interface element that overlays the main content to capture user attention for a specific task or message. It helps users review information, confirm an action, or complete a short input process without leaving the current page.

Use this component when you need to interrupt the flow for a meaningful purpose (e.g., confirmation, announcement, or short form input).

Common alternative names:
Modal, Pop-up Window, Overlay

---

Variants

Confirm Dialog

Basic confirmation dialog with two actions.

Preview

Code

showKitDialog<void>(
  context,
  title: 'Remove item?',
  subtitle: 'Are you sure want to remove this item from your cart?',
  primaryLabel: 'Remove',
  secondaryLabel: 'Cancel',
  onPrimary: () => Navigator.pop(context),
  onSecondary: () => Navigator.pop(context),
);

---

Error Dialog

Simple error message dialog without actions.

Preview

Code

showKitDialog<void>(
  context,
  title: 'Opps!\nSomething went wrong',
  subtitle: 'Please try again later.',
);

---

Error with Button

Error dialog with a dismissal action.

Preview

Code

showKitDialog<void>(
  context,
  title: 'Opps!\nSomething went wrong',
  subtitle: 'Please try again later.',
  primaryLabel: 'OK',
  onPrimary: () => Navigator.pop(context),
);

---

Input Dialog

Dialog with form input and actions.

Preview

Code

showKitDialog<void>(
  context,
  title: "What's your team name",
  subtitle: 'The team name will be shown for all members.',
  content: InputField(
    hintText: 'Placeholder text',
    border: Border.all(color: context.color.borderDisabled),
    validator: (value) {
      if (value == null || value.isEmpty) {
        return 'This field is required';
      }
      return null;
    },
  ),
  primaryLabel: 'Create',
  onPrimary: () => Navigator.pop(context),
  secondaryLabel: 'Cancel',
  onSecondary: () => Navigator.pop(context),
);

---

Avatar Dialog

Dialog with a small circular image at the top.

Preview

Code

showKitDialog<void>(
  context,
  heroImage: ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: Image.network(
      'https://picsum.photos/200',
      width: 80,
      height: 80,
    ),
  ),
  title: 'Remove item?',
  subtitle: 'Are you sure want to remove this item from your cart?',
  primaryLabel: 'Remove',
  secondaryLabel: 'Cancel',
  onPrimary: () => Navigator.pop(context),
  onSecondary: () => Navigator.pop(context),
);

---

Full-width Image Dialog

Dialog with full-width layout and hero image.

Preview

Code

showKitDialog<void>(
  context,
  isFull: true,
  heroImage: ClipRRect(
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(12),
      topRight: Radius.circular(12),
    ),
    child: Image.network(
      'https://picsum.photos/1000',
      height: 200,
      width: double.infinity,
      fit: BoxFit.cover,
    ),
  ),
  title: 'Introducing Virtual Reality',
  subtitle: 'Please check out all-new feature',
  primaryLabel: 'Remove',
  onPrimary: () => Navigator.pop(context),
);

---

Properties

Property	Type	Description
heroImage	Widget?	Optional widget displayed as a banner at the top of the dialog.
title	String?	Primary text displayed at the top of the dialog content.
subtitle	String?	Secondary text displayed below the title.
content	Widget?	Custom widget displayed in the dialog’s content area.
primaryLabel	String?	Text label for the primary action button.
onPrimary	VoidCallback?	Callback triggered when the primary button is pressed.
secondaryLabel	String?	Text label for the optional secondary action button.
onSecondary	VoidCallback?	Callback triggered when the secondary button is pressed.
radius	double	Corner radius of the dialog container and hero image. Default: 12.
isFull	bool	Makes the dialog content expand to full width. Default: false.
padding	EdgeInsetsGeometry	Padding around the dialog content. Default: EdgeInsets.all(16).
barrierDismissible	bool	Whether clicking outside the dialog dismisses it. Default: true.