ドラッグ&ドロップ Drag and Drop
物をつかんで別の場所まで運び、置き場所の上で離すと受け取られる。
本物の 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