コンテキストメニュー(長押し) Context Menu
写真などを長押しすると、その要素が浮き上がって拡大され、下に操作メニューが出る iOS 風の動き。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
iOS の写真アプリやメッセージで、長押しするとプレビューとメニューが出るあの動きです。
CupertinoContextMenu で囲むだけで、浮き上がり・背景のぼかし・メニュー表示まで揃います。
メニューの項目を押したら Navigator.pop で閉じるのを忘れないこと(閉じないと残り続けます)。
PC の右クリックで出したい場合は、Material 側の MenuAnchor や ContextMenuController を使います。
こんなときに
- 写真・カード・メッセージなど「その物」に対する操作を出したい
- 中身をプレビューしながら操作を選ばせたい
避けたい場面
- その操作の入口が長押ししかない(長押しは気づかれにくい。他の入口も用意する)
最小コード
CupertinoContextMenu(
actions: [
CupertinoContextMenuAction(
trailingIcon: CupertinoIcons.share,
onPressed: () => Navigator.of(context).pop(),
child: const Text('共有'),
),
CupertinoContextMenuAction(
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
onPressed: () => Navigator.of(context).pop(),
child: const Text('削除'),
),
],
child: Image.asset('photo.jpg'),
)使うウィジェット
CupertinoContextMenuCupertinoContextMenuAction