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

ラジアルメニュー Radial Menu

中央のボタンを押すと、項目が円を描くように周りへ飛び出すメニュー。

別名
パイメニューサークルメニュー円形メニュー扇形メニュー放射状メニューPie MenuCircular Menu
動き
円形に広がる中央から飛び出すタップで開く
作り方
自作 標準ウィジェットの組み合わせで自分で作ります

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

別タブで大きく開く ↗

どんなもの?

項目が中心から同じ距離に並ぶので、どの項目へも指の移動量がほぼ同じになるのが特徴です。

ゲームの武器選択や、カメラ・描画アプリのツール切り替えでよく見かけます。

Flutter に標準ウィジェットはないため、AnimationController で 0→1 の値を作り、

各項目を Offset.fromDirection(角度と距離)で中心からずらして作ります。

Curves.easeOutBack を使うと少し行き過ぎて戻る動きになり、「飛び出した」感じが出ます。

こんなときに

  • 項目が3〜8個で、どれも同じくらいの頻度で使う
  • 片手で、指をあまり動かさずに選ばせたい(ゲーム・お絵かき系)

避けたい場面

  • 項目が多い、または文字ラベルを読ませたい(アイコンだけになりがちで分かりにくい)
  • 画面の端に置くとき(円の半分が画面外にはみ出す。端なら扇形にする)

最小コード

// _c: AnimationController(duration: 350ms)
final t = Curves.easeOutBack.transform(_c.value);
Stack(
  alignment: Alignment.center,
  children: [
    for (var i = 0; i < items.length; i++)
      Transform.translate(
        offset: Offset.fromDirection(
          -pi / 2 + 2 * pi * i / items.length, // 真上から時計回り
          96 * t,                               // 中心からの距離
        ),
        child: IconButton.filledTonal(icon: Icon(items[i]), onPressed: ...),
      ),
    FloatingActionButton(onPressed: toggle, child: const Icon(Icons.add)),
  ],
)

使うウィジェット

AnimationControllerStackTransform.translate

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

触ってみる ↗
メニュー スピードダイヤルSpeed Dial

右下の丸いボタン(FAB)を押すと、関連する小さなボタンが上に積み上がるように出るメニュー。

上に並ぶ