【FlutterFlow】新機能：ドラッグ＆ドロップ機能を使ってみよう。

FlutterFlowがまたアップデートされ、ドラッグ＆ドロップ機能も追加されました。機能アップデートサイクルが早くてワクワクしますね。

今回はこのDrag＆Drop機能（Draggable + DragTarget）を試してみたので書いていきたいと思います。

FlutterFlowの新機能：Drag＆Drop機能（Draggable + DragTarget）はこんな感じ

公式ドキュメントを見ながら同じように作ってみました。こんな感じです。

ドラッグしたものを特定の場所に置くことができました！スムーズに動いていい感じですね。

X（旧Twitter）上では、この機能を応用してオセロゲームやキャンディゲームを作ってた人たちまでいました。

面白いですね！

では詳細みていきましょう。

Draggableウィジェット

まずはドラッグされる側のDraggableウィジェットを用意します。

今回は、鉢、スプーン、ボールの三つの画像を用意し、それぞれdraggableウィジェットの中に設定しました。

また、以下のようにドラッグしてドロップした際にパラメータとして値を渡せるようになってます。便利ですね。

今回は上記のようにString型でplantという文字列を渡します。ボールの場合はball、スプーンの場合はspoonという文字列を渡すことにしてみます。

DragTargetの配置

次に、ドラッグした後にドロップする側を設定します。DragTargetを任意の場所に置きます。

今回の場合は「鉢が全部置かれてる画像」と「鉢が1個分空いている画像」を用意しておき、それらをConditionalBuilderで切り替えるようにしています。（Page StateにisShelfFullという変数を持って切り替えています。

ドロップし時のアクションを定義

以下のようにアクションを書いていきます。Dropした時のパラメータを判定できるので、on Drag Acceptアクションで、Dragged Dataが文字列の"plant"かどうかでドラッグさせるかどうかを判断し、TRUEの場合はpage state をアップデートしてconditional builderを切り替えています。

これだけです。面白いですね。

色々な箇所で応用できると思うのでぜひ試してみてくださいね。

アプリ・Webサービスの開発の無料相談はこちら

FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。