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

ドラッグ&ドロップ Drag and Drop

物をつかんで別の場所まで運び、置き場所の上で離すと受け取られる。

別名
D&Dドラッグアンドドロップ仕分けつかんで移動Draggable
動き
つかんで運ぶ置き場所が光る離して置く
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの?

運ぶ側を Draggable、受け取る側を DragTarget で作り、data で「何を運んでいるか」を渡します。

feedback が指にくっついて動く見た目、childWhenDragging が元の場所に残る見た目です。

DragTarget の builder には、今上に乗っている候補(candidateData)が来るので、

それを使って「ここに置ける」と光らせると分かりやすくなります。

スクロールする画面では LongPressDraggable にすると、スクロールと取り合いになりません。

こんなときに

  • カンバンのカード移動、仕分け、パズルなど「場所を移す」こと自体が操作

避けたい場面

  • 同じリスト内の順番入れ替えだけ(ReorderableListView のほうが簡単で親切)

最小コード

Draggable<String>(
  data: 'りんご',
  feedback: const Material(child: Chip(label: Text('りんご'))),
  childWhenDragging: const Opacity(opacity: 0.3, child: Chip(label: Text('りんご'))),
  child: const Chip(label: Text('りんご')),
),
DragTarget<String>(
  onAcceptWithDetails: (details) => setState(() => fruits.add(details.data)),
  builder: (context, candidates, rejected) => Container(
    color: candidates.isNotEmpty ? Colors.blue.shade100 : Colors.grey.shade200,
    child: const Text('果物'),
  ),
)

使うウィジェット

DraggableLongPressDraggableDragTarget

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

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

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

つかんで持ち上がる
触ってみる ↗
ジェスチャー ピンチズームPinch to Zoom

2本指で広げると拡大、つまむと縮小、1本指で動かすと見る場所が移動する。

2本指で広げる