個人開発者が勉強がてらまとめているだけのサイトです

コンテキストメニュー(長押し) Context Menu

写真などを長押しすると、その要素が浮き上がって拡大され、下に操作メニューが出る iOS 風の動き。

別名
長押しメニューピークプレビューメニュー右クリックメニューHaptic Touch メニューLong Press Menu
動き
長押しで開く浮き上がる背景がぼける
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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

似ているもの・一緒に見たいもの

触ってみる ↗
ダイアログ・シート アクションシートAction Sheet

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

下から出てくる