【日本語版】【Flutter】Widget of the Week – #31 Draggable【要約】

動画

要約

  • 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に切り替わることになります。
 

childで角が尖ったwidget、
childWhenDraggingで角が丸まったwidgetを指定。
ドラッグが始まったときに角が丸まっていることがわかる。

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

feedbackにMyGreyBox(グレー色のBox)を指定
ドラッグ開始地点にMyGreyBoxを残すことができる

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

Flutterではドロップする先をDragTarget widgetを使って実装できます。
 

ドラッグ先はDragTargetで実装しよう

DragTargetには3つの関数をプロパティとして指定する必要があります。

1つ目はonWillAcceptです。

この関数でドラッグされてきたDraggableをDragTargetが受取可能かチェックします。
 

onWillAcceptでドロップ可能か判定する

2つ目の関数はonAcceptです。

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

ドロップ時に実行する処理はonAcceptに実装する

3つ目の関数はonLeaveです。

onLeaveはDraggableがDragTarget上に乗ってから外れたときに実行されます。
 

 ドロップされなかった場合の処理はonLeaveに記載する

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

DragTargetの見た目はbuilderで定義する。
ドロップ前は点線のBox、ドロップ後はドロップされた色のBoxになるように実装
builderを実装することで、DragTargetの見た目を自由に切り替えられる

まとめ

Widget of the Weekの#31 Draggableの日本語翻訳版でした。

ドラッグはユーザーによる情報の移動を直感的に表現できる強力なUIパターンです。

FlutterではDraggableとDragTargetを使って、簡単にドラッグを実装することができます。

■ 次の記事はこちら
#32 – AnimatedList

■Widget of the Week まとめ
Widget of the Week 一覧