Skip to main content
Logo Appt Light

Accessibility dialog on Flutter

A dialog overlays the screen and offers one or more actions to proceed. Dialogs should always include a close button to make them accessible for users of assistive technologies. Furthermore, the focus of assistive technologies should be trapped inside the dialog while it's visible.

With Flutter, you can use SimpleDialogAlertDialog or CupertinoAlertDialog to show alerts. An AlertDialog is styled liked an Android dialog. A CupertinoAlertDialog is styled like an iOS dialog. You should always supply a close action in the actions array. The focus of assistive technologies is automatically trapped inside the dialog while it's visible.

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Confirm Appt membership?'),
    content: Text('Your bank account will be billed.'),
    actions: [
      TextButton(
        onPressed: confirmTransaction,
        child: const Text('Proceed'),
      ),
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: const Text('Cancel'),
      )
    ],
  ),
);

Feedback?

Let us know!