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

押しっぱなしで連続 Press and Hold to Repeat

+を1回押すと1つ増え、押し続けると連続で増えていき、だんだん速くなる。

別名
オートリピート長押しで連続入力押し続けて増やす連打不要のボタンAuto RepeatHold to Increment
動き
押すと1つ増える押し続けると連続だんだん速くなる
作り方
自作 標準ウィジェットの組み合わせで自分で作ります

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

数量やタイマーの時間など、大きく変えたいときに何十回も押させないための工夫です。

onTapDown ですぐ1つ増やし、0.4 秒ほど押し続けたら Timer で連続して増やし始め、

間隔を少しずつ短くしていくと、狙った値に素早く近づけて最後は細かく合わせられます。

onTapUp と onTapCancel で必ず Timer を止めること(止め忘れると増え続けます)。

こんなときに

  • 数量・時間・音量など、+−ボタンで大きく値を変えることがある

避けたい場面

  • 値の範囲がとても広い(数値を直接入力させたほうが早い)

最小コード

void start(int delta) {
  step(delta);                              // 押した瞬間に1つ
  var interval = 160;
  void tick() => timer = Timer(Duration(milliseconds: interval), () {
    step(delta);
    interval = max(35, (interval * 0.85).round()); // だんだん速く
    tick();
  });
  timer = Timer(const Duration(milliseconds: 400), tick);
}

GestureDetector(
  onTapDown: (_) => start(1),
  onTapUp: (_) => timer?.cancel(),
  onTapCancel: () => timer?.cancel(),
  child: const Icon(Icons.add),
)

使うウィジェット

GestureDetector(onTapDown/onTapUp)Timer

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

触ってみる ↗
ジェスチャー 長押しで確定Hold to Confirm

ボタンを押し続けると色が溜まっていき、端まで溜まると実行される。途中で離すと溜めた分が抜ける。

押し続けると溜まる
触ってみる ↗
ジェスチャー 回すダイヤルRotary Knob

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

円を描いてなぞる