ラジアルメニュー Radial 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