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などの構築に興味のある方は、こちらからご気軽にご相談ください。