こんにちは。前回、FlutterFlowにドラッグ＆ドロップ機能が出たので以下のようなサンプルを作ってみました。
https://citrusapp.jp/posts/flutterflow-draggable-dragtarget
今回は、母集団からドラッグしてAチームとBチームに分けたり、AチームからBチームに移動したりする機能を作ってみました。
完成イメージ
こんな感じです。
いかがでしょう？結構サクサク動いて楽しいですよね！
素晴らしいです。では解説していきたいと思います。
UI側
UIはこんな感じです。
DragTargetを二つ配置します。AグループとBグループとしました。これらが ドラッグ&ドロップのターゲットですね。
で、それらの下の方に元のマスターデータとして「動物たち」というリストを置いています。これをDraggableで囲んでおり、これらをドラッグできるようにしていますね。
また、GroupAの中のリスト、GroupBの中のリスト、それぞれのアイテムも、一回置いたあとも修正（AグループからBグループへ）とかドラッグし直せるようにしたいです。
そのためこれらもDraggableでくくってドラッグ可能にしています。
Local Page Stateの設定
以下のように、ドラッグ&ドロップしたデータを入れておくところを作っておきます。
マスターデータの動物一覧を入れておくanimalsというドキュメントのリスト、groupA用、groupB用のリストを用意します。
animalsには、初期表示時にFirestoreからクエリでanimalsというデータベースコレクションからデータをとってきて、update page stateで突っ込んでます。
DragTargetのアクション設定
最後はDragTargetのアクションで、page stateを更新しましょう。
まずGroupA側のDragTargetでは、groupA用のpage stateにDragged DataをAddし、マスターデータ側のanimalsからDragged Dataをremoveします。
同様のことをgroupBでもやったら大体完了です。
簡単ですね！
ドラッグ中の枠の色を変えたりもできる。
ドラッグして（まだドロップする前に）ドラッグターゲットの枠の上に来たらドラッグターゲットの枠の色を変える、なんてことも可能です。
いい感じですよね！
枠の色をpage stateに持っておくことで可能なので試してみてください。
細かい解説はYoutube動画の方でもやってますので興味のある方はご覧ください。
Youtube動画での解説はこちら
本記事のドラッグ&ドロップに関する内容は以下の動画でもっと細かく共有してますので興味のある方はぜひ。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。