VisorFormDialog

VisorFormDialog is a thin wrapper around Material's Dialog that enforces a consistent maximum width and padding for forms presented as modals. Drop a Form (or any widget) into the child slot — the dialog handles the chrome.

Preview

When to Use

• Presenting a form inside a modal dialog (login, edit, confirm)
• Constraining a form surface to a readable max-width on wide screens
• Standardising the padding and layout frame for dialog-hosted forms

When Not to Use

• Full-screen sheets or bottom sheets (use a sheet widget instead)
• Non-form content dialogs — alerts, confirms (use VisorConfirmSheet)
• Dialogs that need custom chrome, headers, or action bars

Installation

npx visor add form-dialog --target flutter

Or copy components/flutter/visor_form_dialog/visor_form_dialog.dart into your project.

Basic Usage

import 'package:ui/ui.dart';

showDialog<void>(
  context: context,
  builder: (_) => VisorFormDialog(
    child: Form(
      key: _formKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          VisorTextInput(labelText: 'Email', controller: _email),
          VisorPasswordInput(labelText: 'Password', controller: _password),
          VisorButton(label: 'Sign in', onPressed: _submit),
        ],
      ),
    ),
  ),
);

Customising Width and Padding

VisorFormDialog(
  maxWidth: 640,
  padding: const EdgeInsets.all(32),
  child: _editorBody,
)

API Reference

Accessibility

• Inherits Material's modal-dialog semantics — screen readers announce the dialog and trap focus inside it for the duration of presentation.
• Padding uses an EdgeInsetsGeometry so consumers can pass EdgeInsetsDirectional when RTL-specific paddings are needed.

Source

• components/flutter/visor_form_dialog/visor_form_dialog.dart
• Quality contract audit row: docs/flutter-widget-quality-contract.md (Rec8)