Skip to main content
Different from other Neo widgets: Modal is used as a method call (NeoModal.show()) rather than a widget you place in your build tree. Use it for important interactions that require user attention—confirmations, forms, or critical information that must be acknowledged.

​
Examples

  • Basic Modal
  • Form Modal
  • Non-Dismissable Modal

Simple modal with title, content, and action buttons.

NeoModal.show(
  ref,
  title: "Are You Sure?",
  contentBuilder: (context) => Text(
    "Take a moment to review the details provided to ensure you understand the implications.",
    style: theme.textStyles.body2.copyWith(
      color: theme.colors.fgSecondary,
    ),
  ),
  actionsBuilder: (context) => [
    NeoButton(
      variant: NeoButtonVariant.ghost,
      label: "Cancel",
      onPressed: () => NeoModal.dismissAll(ref),
    ),
    NeoButton(
      variant: NeoButtonVariant.filled,
      label: "Okay",
      onPressed: () {
        // Handle action
        NeoModal.dismissAll(ref);
      },
    ),
  ],
);

​
Methods

​
NeoModal.show()

Displays a modal overlay with customizable content and actions.

​
Required Parameters

​
ref
WidgetRef
required
The widget reference from a ConsumerWidget or HookConsumerWidget, used to access the modal provider.
​
title
String
required
The title text displayed at the top of the modal.
​
contentBuilder
Widget Function(BuildContext)
required
A builder function that returns the main content of the modal. Use this to create forms, display information, or any custom content.
​
actionsBuilder
List<Widget> Function(BuildContext)
required
A builder function that returns a list of action buttons displayed at the bottom of the modal. Typically contains confirm/cancel buttons.

​
Optional Parameters

​
isDismissable
bool
default:"true"
Whether users can dismiss the modal by clicking the background or close button. Set to false for critical modals that require explicit user action.

​
NeoModal.dismissAll()

Dismisses all currently visible modals.
​
ref
WidgetRef
required
The widget reference to access the modal provider.

​
NeoModal.dismissCount()

Dismisses a specific number of modals from the top of the stack.
​
ref
WidgetRef
required
The widget reference to access the modal provider.
​
count
int
required
The number of modals to dismiss from the stack.

​
Best Practices

  • Dangerous Actions: Use isDanger: true on buttons for destructive actions like deletion

​
Integration Notes

  • Backdrop Blur: Modals automatically blur the background content to focus user attention
  • Responsive Design: Modals automatically adapt to different screen sizes with appropriate padding and constraints
  • Stack Management: Multiple modals stack on top of each other; use dismissCount() to dismiss specific numbers of modals
⌘I