showCommandDialog<T> function

Future<T?> showCommandDialog<T>({ required BuildContext context, required CommandBuilder builder, BoxConstraints? constraints, bool autofocus = true, Duration debounceDuration = const Duration(milliseconds: 500), WidgetBuilder? emptyBuilder, ErrorWidgetBuilder? errorBuilder, WidgetBuilder? loadingBuilder, double? surfaceOpacity, double? surfaceBlur, })

Shows a command palette in a modal dialog.

Displays a Command widget in a modal dialog with customizable constraints, backdrop effects, and search behavior.

Parameters

• context - The build context.
• builder - The command builder for search results.
• constraints - Optional size constraints. Defaults to 510x349.
• autofocus - Whether to auto-focus the search field. Defaults to true.
• debounceDuration - Search debounce delay. Defaults to 500ms.
• emptyBuilder - Custom widget for empty results.
• errorBuilder - Custom widget for error states.
• loadingBuilder - Custom widget for loading states.
• surfaceOpacity - Modal surface opacity.
• surfaceBlur - Modal surface blur amount.

Returns

A Future that completes with the dialog result of type T, or null if dismissed.

Example

final result = await showCommandDialog<String>(
  context: context,
  builder: (context, query) async* {
    yield commands.where((c) => c.contains(query ?? '')).toList();
  },
);

Implementation

Future<T?> showCommandDialog<T>({
  required BuildContext context,
  required CommandBuilder builder,
  BoxConstraints? constraints,
  bool autofocus = true,
  Duration debounceDuration = const Duration(milliseconds: 500),
  WidgetBuilder? emptyBuilder,
  ErrorWidgetBuilder? errorBuilder,
  WidgetBuilder? loadingBuilder,
  double? surfaceOpacity,
  double? surfaceBlur,
}) {
  return showDialog<T>(
    context: context,
    builder: (context) {
      final theme = Theme.of(context);
      final scaling = theme.scaling;
      surfaceOpacity ??= theme.surfaceOpacity;
      surfaceBlur ??= theme.surfaceBlur;
      return ConstrainedBox(
        constraints: constraints ??
            const BoxConstraints.tightFor(width: 510, height: 349) * scaling,
        child: ModalBackdrop(
          borderRadius: subtractByBorder(theme.borderRadiusXxl, 1 * scaling),
          surfaceClip: ModalBackdrop.shouldClipSurface(surfaceOpacity),
          child: Command(
            autofocus: autofocus,
            builder: builder,
            debounceDuration: debounceDuration,
            emptyBuilder: emptyBuilder,
            errorBuilder: errorBuilder,
            loadingBuilder: loadingBuilder,
            surfaceOpacity: surfaceOpacity,
            surfaceBlur: surfaceBlur,
          ),
        ),
      );
    },
  );
}