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

回すダイヤル Rotary Knob

丸いつまみの周りを、円を描くように指でなぞると、つまみが回って音量などの値が変わる。

別名
ノブつまみダイヤル操作回して調整円形スライダーKnobCircular Slider
動き
円を描いてなぞるつまみが回る値が変わる
作り方
自作 標準ウィジェットの組み合わせで自分で作ります

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

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

触ってみる ↗
ジェスチャー 2本指で回転Two-finger Rotate

写真やスタンプを2本の指でひねると、その向きに回転する。指を広げれば同時に拡大もできる。

2本指でひねる