動画
要約
- widgetをユーザーにドラッグさせたい場合はDraggable widgetを使おう
- ドラッグ先はDragTarget widget で実装できる
- ドロップ可否の判定やドラッグ後の再ビルドなど、様々な関数が用意されている
内容
モバイルアプリには様々なUIパターンがあります。ドラッグもその１つです。
例えば、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 一覧