components/modals/flutstrap_modal library Components Overlays

Flutstrap Modal

A customizable modal dialog with Bootstrap-inspired styling, multiple variants, sizes, and built-in service methods for common modal patterns.

Usage Examples

// Basic modal with custom content
FlutstrapModal(
  title: Text('User Profile'),
  content: Column(
    children: [
      CircleAvatar(radius: 40),
      SizedBox(height: 16),
      Text('John Doe', style: TextStyle(fontSize: 18)),
      Text('john.doe@example.com'),
    ],
  ),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: Text('Close'),
    ),
  ],
)

// Using modal service for common patterns
FlutstrapModalService.showConfirmModal(
  context: context,
  title: 'Delete Item',
  content: 'This action cannot be undone. Are you sure?',
  confirmText: 'Delete',
  cancelText: 'Cancel',
  variant: FSModalVariant.danger,
).then((confirmed) {
  if (confirmed) {
    // Perform deletion
  }
});

Accessibility

  • Full screen reader support with proper semantic labels
  • Keyboard navigation support (Escape to close, Tab to navigate)
  • Focus management when modal opens/closes
  • Proper ARIA attributes for modal dialogs

Usage Examples

// Basic modal with custom content
FlutstrapModal(
  title: Text('User Profile'),
  content: Column(
    children: [
      CircleAvatar(radius: 40),
      SizedBox(height: 16),
      Text('John Doe', style: TextStyle(fontSize: 18)),
      Text('john.doe@example.com'),
    ],
  ),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: Text('Close'),
    ),
  ],
)

// Using modal service for common patterns
FlutstrapModalService.showConfirmModal(
  context: context,
  title: 'Delete Item',
  content: 'This action cannot be undone. Are you sure?',
  confirmText: 'Delete',
  cancelText: 'Cancel',
  variant: FSModalVariant.danger,
).then((confirmed) {
  if (confirmed) {
    // Perform deletion
  }
});

Accessibility

  • Full screen reader support with proper semantic labels
  • Keyboard navigation support (Escape to close, Tab to navigate)
  • Focus management when modal opens/closes
  • Proper ARIA attributes for modal dialogs

Classes

FlutstrapModal
Flutstrap Modal
FlutstrapModalService
Service for showing Flutstrap modals
FlutstrapModalTrigger
A button that triggers a modal when pressed

Enums

FSModalSize
Flutstrap Modal Sizes
FSModalVariant
Flutstrap Modal Variants