FlutterFlowは、コーディング不要でアプリ開発ができるノーコード開発ツールです。

そもそもFlutterFlowについて詳しく知りたい方はこちら

今回は、FlutterFlowを使って削除機能を実装する方法を解説します。削除する際には、誤って削除することを防ぐために確認ポップアップを表示する必要があります。この記事では、削除機能の実装方法だけでなく、確認ポップアップの出し方についても詳しく説明します。

まずは削除アイコンボタンを設置

まずは以下のように削除機能をつけたい画面に（僕の場合はコンテンツ詳細画面に）Icon Buttonをおきます。

ActionからAlert Dialog（確認用ポップアップ）を選択

削除ボタンを押したらいきなり消えるのではなく「削除しますか？」の確認ポップアップを出したいですよね。

そのためにはまず、Actionの設定からAlert Dialogで検索し選択します。

以下のように削除メッセージやボタンのラベル名を変更します。簡単ですね。

Add Conditonal からConfirm Dialog Responseを設定する。

ポップアップダイアログの選択によって条件分岐するため、今のAlert DialogのアクションからAdd Conditionalをすることで以下のように分岐が作られます。

あとは以下のようにFLASEの時は特に何もせず、TRUEの時はDelete Documentして、必要に応じてShow Snack BarしてNavigate Backする、、、など必要な処理を書いていくだけです。

とても簡単ですね。

削除・アラートポップアップ機能をYoutube動画で確認したい方はこちら

FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。

この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。

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

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

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

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

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