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

スピードダイヤル Speed Dial

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

別名
FABメニュー展開するFABフローティングアクションメニューExpandable FABFAB Menu
動き
上に並ぶ順番に出てくるタップで開く
作り方
パッケージあり 標準でも作れますが、pub.dev のパッケージを使うと早いです

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

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

触ってみる ↗
ダイアログ・シート モーダルボトムシートModal Bottom Sheet

画面の下から板がせり上がってきて、選択肢や小さなフォームを出す。外側を押すか下に引くと閉じる。

下から出てくる