​
Overview

HuxDialog is a customizable dialog component that provides a consistent modal experience with optional header, content, and action buttons. The dialog automatically adapts to light and dark themes and provides a clean, modern appearance with proper spacing and accessibility. HuxDialog Component

​
Component Variants

​
Basic Dialog

Simple dialog with title and content: 
HuxDialog(
  title: 'Basic Dialog',
  content: Text('This is a basic dialog with Hux styling.'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('Close'),
      variant: HuxButtonVariant.secondary,
    ),
  ],
)

​
Confirmation Dialog

Dialog for confirming important actions: 
HuxDialog(
  title: 'Confirm Action',
  subtitle: 'Are you sure you want to proceed?',
  content: Text('This action cannot be undone. Please confirm that you want to continue.'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(false),
      child: Text('Cancel'),
      variant: HuxButtonVariant.secondary,
    ),
    HuxButton(
      onPressed: () => Navigator.of(context).pop(true),
      child: Text('Confirm'),
    ),
  ],
)

​
Large Dialog

Dialog with extensive content: 
HuxDialog(
  title: 'Large Dialog',
  subtitle: 'This dialog demonstrates the large size variant',
  size: HuxDialogSize.large,
  content: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('This is a large dialog with more content.'),
      SizedBox(height: 16),
      Text('You can include multiple paragraphs, forms, or other widgets here.'),
    ],
  ),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('Close'),
      variant: HuxButtonVariant.secondary,
    ),
    HuxButton(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('Save'),
    ),
  ],
)

​
Size Variants

​
Small Dialog

Compact dialog for simple confirmations: 
HuxDialog(
  size: HuxDialogSize.small,
  title: 'Quick Confirm',
  content: Text('Are you sure?'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(false),
      child: Text('No'),
      variant: HuxButtonVariant.secondary,
    ),
    HuxButton(
      onPressed: () => Navigator.of(context).pop(true),
      child: Text('Yes'),
    ),
  ],
)

​
Medium Dialog

Standard dialog size (default): 
HuxDialog(
  size: HuxDialogSize.medium, // Default
  title: 'Standard Dialog',
  content: Text('This is the default medium size.'),
)

​
Large Dialog

Spacious dialog for complex content: 
HuxDialog(
  size: HuxDialogSize.large,
  title: 'Complex Dialog',
  content: Column(
    children: [
      Text('Multiple sections'),
      SizedBox(height: 16),
      Text('Forms and widgets'),
      SizedBox(height: 16),
      Text('Extended content'),
    ],
  ),
)

​
Extra Large Dialog

Maximum size for extensive content: 
HuxDialog(
  size: HuxDialogSize.extraLarge,
  title: 'Full Screen Dialog',
  content: Container(
    height: 400,
    child: ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) => ListTile(
        title: Text('Item ${index + 1}'),
      ),
    ),
  ),
)

​
Using showHuxDialog

For convenience, Hux provides a showHuxDialog function that wraps the dialog in a showDialog call: 
final bool? result = await showHuxDialog<bool>(
  context: context,
  title: 'Confirm Action',
  content: Text('Are you sure?'),
  actions: [
    HuxButton(
      onPressed: () => Navigator.of(context).pop(false),
      child: Text('Cancel'),
      variant: HuxButtonVariant.secondary,
    ),
    HuxButton(
      onPressed: () => Navigator.of(context).pop(true),
      child: Text('Confirm'),
    ),
  ],
);

if (result == true) {
  // User confirmed
  print('Action confirmed');
}

​
Properties

​
Core Properties

  • title - Optional title text displayed in the dialog header
  • subtitle - Optional subtitle text displayed below the title
  • content - The main content widget to display in the dialog body
  • actions - Optional list of action buttons displayed at the bottom

​
Appearance Properties

  • variant - Visual variant of the dialog (default, destructive, success, warning)
  • size - Size variant of the dialog (small, medium, large, extraLarge)
  • showCloseButton - Whether to show a close button in the header (default: true)

​
Behavior Properties

  • barrierDismissible - Whether the dialog can be dismissed by tapping outside
  • clipBehavior - How to clip the dialog content
  • shape - Custom shape for the dialog
  • insetPadding - Padding around the dialog content

​
Styling & Layout

​
Dimensions

  • Small: Max width 400px, min width 300px
  • Medium: Max width 500px, min width 350px (default)
  • Large: Max width 700px, min width 500px
  • Extra Large: Max width 900px, min width 700px

​
Color System

  • Background: HuxTokens.surfaceElevated(context)
  • Text: HuxTokens.textPrimary(context) and HuxTokens.textSecondary(context)
  • Borders: HuxTokens.borderPrimary(context) and HuxTokens.borderSecondary(context)
  • Shadows: HuxTokens.shadowColor(context) with proper opacity

​
Typography

  • Title: 18-24px with medium weight (based on size)
  • Subtitle: 14px with secondary text color
  • Content: Inherits from theme

​
Accessibility

​
Screen Reader Support

  • Proper semantic labeling for dialog content
  • Title and subtitle announcements
  • Action button descriptions

​
Keyboard Navigation

  • Tab key support for action buttons
  • Enter/Space key activation
  • Escape key dismissal (when barrierDismissible is true)

​
Focus Management

  • Automatic focus on first action button
  • Proper focus trapping within dialog
  • Focus restoration on dialog close

​
Best Practices

​
Examples

Form Dialogs

Create dialogs with form inputs and validation

Confirmation Flows

Build multi-step confirmation processes

Content Display

Show rich content in modal dialogs

Custom Styling

Customize dialog appearance and behavior