回すダイヤル Rotary Knob
丸いつまみの周りを、円を描くように指でなぞると、つまみが回って音量などの値が変わる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
オーディオ機器の音量ノブや、タイマーのダイヤルのような操作です。スライダーより「機械を触っている」感覚が出ます。
指の位置から math.atan2 で中心から見た角度を求め、前回からの角度の差を値の変化にします。
角度が -180° と 180° の境目をまたぐと値が飛ぶので、差が ±180° を超えたら 360° を足し引きして補正します。
つまみと目盛りは CustomPaint で描きます。
こんなときに
- 音楽・カメラ・家電操作など、機械らしい見た目にしたいアプリ
避けたい場面
- 正確な数値を入れさせたい場面(スライダーや数値入力のほうが速くて正確)
最小コード
double angleOf(Offset p) => atan2(p.dy - size / 2, p.dx - size / 2);
GestureDetector(
onPanStart: (d) => last = angleOf(d.localPosition),
onPanUpdate: (d) {
final a = angleOf(d.localPosition);
var delta = a - last;
if (delta > pi) delta -= 2 * pi; // 境目をまたいだときの補正
if (delta < -pi) delta += 2 * pi;
last = a;
setState(() => value = (value + delta / sweep * 100).clamp(0, 100));
},
child: CustomPaint(size: Size.square(size), painter: DialPainter(value / 100)),
)使うウィジェット
GestureDetector(onPan)CustomPaintmath.atan2