スピードダイヤル Speed Dial
右下の丸いボタン(FAB)を押すと、関連する小さなボタンが上に積み上がるように出るメニュー。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
Material Design で「Speed dial」と呼ばれている形です。
メインの操作が1つではなく「作成系の操作が数個ある」ときに、FAB を1つに保ったまま選択肢を出せます。
pub.dev の flutter_speed_dial を使うとすぐ作れますが、AnimationController と
Interval(項目ごとに少しずつ遅らせる)で自作しても数十行です。
開いている間は背景を暗くし、外側タップで閉じられるようにすると迷わせません。
こんなときに
- 「新規作成」の種類が2〜5個ある(写真を追加 / メモを追加 など)
- 画面の主役はリストや地図で、操作ボタンは邪魔にしたくない
避けたい場面
- 6個以上の項目(画面の上まで届いてしまう)
- 削除など危険な操作を混ぜる(押し間違えやすい場所なので)
最小コード
// 下の項目から少しずつ遅れて出す(スタッガー)
final start = i * 0.15;
final t = Interval(start, start + 0.55, curve: Curves.easeOut)
.transform(_c.value);
Opacity(
opacity: t,
child: Transform.translate(
offset: Offset(0, 16 * (1 - t)),
child: FloatingActionButton.small(heroTag: null, ...),
),
)使うウィジェット
FloatingActionButtonAnimationController
パッケージ: flutter_speed_dial ↗