Dialog

Modal chrome — a bordered, padded panel with an optional title — ready to hand to present.

See also: ApprovalPrompt for a ready-made yes/no decision.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

// Present it over the current screen and await the result:
final confirmed = await context.present<bool>(const DeleteDialog());

// DeleteDialog's build returns the frame and pops with a result:
Dialog(
  title: 'Confirm',
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Text('Delete 3 files? This cannot be undone.'),
      Row(
        children: [
          Button(text: 'Cancel', onPressed: () => context.pop(false)),
          const SizedBox(width: 1),
          Button(text: 'Delete', onPressed: () => context.pop(true)),
        ],
      ),
    ],
  ),
)

Details

Dialog supplies only the frame; positioning and dismissal are present’s job. present centers the dialog by default and keeps focus inside it. Esc dismisses it, completing the present future with null, unless you pass barrierDismissible: false; clicking outside the dialog does nothing. Give it a width for a stable panel size, or leave it null to size to the content.

Constructors

`Dialog()`

Parameter	Type	Default	Description
`title:`	`String?`	—	Optional heading drawn at the top of the panel, inside the border.
`titleStyle:`	`CellStyle?`	—	Style for the `title`. Defaults to the theme’s focused/emphasis style (bold).
`border:`	`BoxBorder?`	—	The panel’s border. Defaults to a box in the theme’s border style.
`padding:`	`EdgeInsets`	`const EdgeInsets.symmetric(horizontal: 1)`	Inner padding between the border and the content.
`width:`	`int?`	—	Total panel width (including the border). Null sizes to content.
`child:`	`Widget`	required	Content rendered inside the dialog frame, beneath `title` when present.

Source

Dialog is defined in packages/fleury/lib/src/catalog/dialog.dart.

Category: Navigation & overlays · All widgets

dialog_example.dart

Example · editable

Widget example() => Dialog(
  title: 'Confirm',
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      const Text('Delete 3 files? This cannot be undone.'),
      Row(
        children: <Widget>[
          Button(text: 'Cancel', autofocus: true, onPressed: () {}),
          const SizedBox(width: 1),
          Button(text: 'Delete', onPressed: () {}),
        ],
      ),
    ],
  ),
);

Live preview

Live

ⓘ how this demo runs