動画
要約
- widgetをユーザーにドラッグさせたい場合はDraggable widgetを使おう
- ドラッグ先はDragTarget widget で実装できる
- ドロップ可否の判定やドラッグ後の再ビルドなど、様々な関数が用意されている
内容
モバイルアプリには様々なUIパターンがあります。ドラッグもその1つです。
例えば、e-mailアドレスを他のコンポーネントに移したり、ドキュメントを他のフォルダに移したりするときにドラッグのUIは使われています。

ユーザーにドラッグさせたいwidgetがあるのであれば、Draggable widgetを試してみてください。
使い方を説明します。
まずDraggableにデータの型を指定しましょう。今回はColorを指定しています。

次に、実際にデータの値をdataプロパティに指定します。

childプロパティも指定しましょう。
ここにはドラッグ前に表示するwidgetを指定します。

続けて、childWhenDraggingプロパティも指定します。
ここに指定したwidgetはドラッグ中に表示されます。

ここまでにchildとchildWhenDraggingを指定しましたが、これにより、ドラッグを始めた段階で、childに指定したwidgetからchildWhenDraggingに指定したwidgetに切り替わることになります。

childWhenDraggingで角が丸まったwidgetを指定。
ドラッグが始まったときに角が丸まっていることがわかる。
また、feedbackにwidgetを指定することで、ドラッグ開始地点に別のwidgetを残すことができます。
(ドラッグの開始地点を視覚的に表現できる)


ドラッグしたwidgetの到達点、つまりドロップする先はどのように実装すればよいでしょうか?
Flutterではドロップする先をDragTarget widgetを使って実装できます。

DragTargetには3つの関数をプロパティとして指定する必要があります。
1つ目はonWillAcceptです。
この関数でドラッグされてきたDraggableをDragTargetが受取可能かチェックします。

2つ目の関数はonAcceptです。
この関数はDraggableがDragTarget上にドロップされたときに実行されます。

3つ目の関数はonLeaveです。
onLeaveはDraggableがDragTarget上に乗ってから外れたときに実行されます。

また、DragTargetの見た目に関してはbuilderプロパティを利用してください。
builderでは、ドロップされたDraggableの値に応じて表示するDragTargetを切り替えることもできます。

ドロップ前は点線のBox、ドロップ後はドロップされた色のBoxになるように実装

まとめ
Widget of the Weekの#31 Draggableの日本語翻訳版でした。
ドラッグはユーザーによる情報の移動を直感的に表現できる強力なUIパターンです。
FlutterではDraggableとDragTargetを使って、簡単にドラッグを実装することができます。
■ 次の記事はこちら
#32 – AnimatedList
■Widget of the Week まとめ
Widget of the Week 一覧