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

なぞって範囲選択 Drag to Select

写真を長押しして、そのまま指をなぞると、なぞった範囲の写真がまとめて選ばれる。

別名
なぞって複数選択スワイプ選択まとめて選択長押しして選択Drag SelectionSwipe to Select
動き
長押しで選択開始なぞった範囲が選ばれる選ぶと縮む
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの?

Google フォトや iOS の写真アプリで、何十枚もの写真を1枚ずつ押さずに選べる操作です。

GestureDetector の onLongPressStart で選択を始め、onLongPressMoveUpdate で指の位置から

何番目の写真の上にいるかを計算し(列数と1マスの大きさから求める)、

押し始めた写真から今の写真まで、読む順の範囲をまとめて選択します。

選んだ写真は少し縮めてチェックを付けると、選ばれていることがひと目で分かります。

こんなときに

  • 写真やファイルの一覧から、たくさんまとめて選ばせたい

避けたい場面

  • 選ぶ物が数個しかない(1つずつ押せば十分)

最小コード

GestureDetector(
  onLongPressStart: (d) => anchor = indexAt(d.localPosition),
  onLongPressMoveUpdate: (d) {
    final i = indexAt(d.localPosition);
    setState(() => selected = {
      for (var k = min(anchor, i); k <= max(anchor, i); k++) k,
    });
  },
  child: GridView.builder(...),
)

int indexAt(Offset p) {
  final size = width / columns;
  return (p.dy ~/ size) * columns + (p.dx ~/ size);
}

使うウィジェット

GestureDetector(onLongPress)GridView

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

触ってみる ↗
ジェスチャー 並べ替えリストReorderable List

行をつかんで上下にドラッグすると、他の行がよけて順番を入れ替えられるリスト。

つかんで持ち上がる
触ってみる ↗
ジェスチャー スワイプで削除Swipe to Dismiss

リストの行を横にスワイプすると、下から色付きの背景が現れ、そのまま行が消える。

横にスワイプ