アクションシート Action Sheet

iOS でおなじみの、下から選択肢の束と、離れた「キャンセル」ボタンが出てくるシート。

別名: iOSの選択シートキャンセル付きメニューCupertino Action Sheet
動き: 下から出てくるキャンセルが分かれている
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

iOS のシステムで「この写真を削除」のように確認と選択を兼ねる場面で使われる形です。

showCupertinoModalPopup に CupertinoActionSheet を渡して出します。

isDestructiveAction: true で赤字（危険な操作）、isDefaultAction: true で太字（推奨）になります。

キャンセルは cancelButton に分けて置くのが iOS の作法です。

こんなときに

iOS らしい見た目で、2〜4個の操作から選ばせたい
削除のように取り消せない操作の確認を兼ねたい

避けたい場面

Android でも同じ見た目にしたい（Android では見慣れないので、モーダルボトムシートが無難）

最小コード

final picked = await showCupertinoModalPopup<String>(
  context: context,
  builder: (context) => CupertinoActionSheet(
    title: const Text('この写真をどうしますか？'),
    actions: [
      CupertinoActionSheetAction(
        isDestructiveAction: true,
        onPressed: () => Navigator.of(context).pop('delete'),
        child: const Text('削除'),
      ),
    ],
    cancelButton: CupertinoActionSheetAction(
      onPressed: () => Navigator.of(context).pop(),
      child: const Text('キャンセル'),
    ),
  ),
);