FlutterFlowで編集・削除機能があるbottom sheetを出してみる

ボタン押下時にBottomSheetを表示、Referenceの受け渡しの方法の備忘録

FlutterFlowをいじり始めて1週間くらいの初心者です。
インスタのようなSNSアプリを作っています。
今回はBottomSheetの表示〜ポストの編集画面への遷移、削除ボタンを押下後の振る舞いまでの実装について記事にします。

完成画像

ポストの詳細画面です。赤丸で囲ってる右上アイコンをタップすると、下から編集と削除があるBottomSheetを表示させます。
BottomSheetはコンポーネントという物で、表示ポストの情報をParameterとして渡す必要があります。
あらかじめFirestoreにポスト保存用のコレクション「contents」を作ってあります。

参考の公式ドキュメント↓
https://docs.flutterflow.io/actions/actions/widget-ui-interactions/bottom-sheet

1.表示するためのBottomSheetを作ります。

BottomSheet用のコンポーネントを追加します。

赤丸の1を選択後に2をクリック。

NewComponent→BottomSheets の編集と削除があるフォーマットを今回は選びました。

好きな名前をつけてCreateComponentします。
今回は「BottomSheet」という名前にしました。

作った「BottomSheet」が表示されています。

2.作成した「BottomSheet」にParameterを設定する

EditPostタップ → 編集画面
DeletePost → ポストを削除
という挙動にしたいためポスト情報を受け取とる必要があります。

作成したBottomSheetを選択してAddParameterをクリック

1. ParameterNameに好きな名前をつけます。今回は「contentsRef」としました。
2. TypeはDocumentReferenceを選ぶ。
3. CollectionTypeは受け渡したいコレクションを選ぶ。私は今回は「contents」です。

ここまで設定できれば一旦BottomSheet側は終わりです。

3.ポスト詳細画面のアクションの設定

ボタンにアクションを登録します。

アイコンボタンを選択してAddActionをクリック。

アクションの種類はOnTapです。
SelectActionで検索できます。検索結果にBottomSheetのShowが出ているのでクリック。

SelectComponentに先ほど作った「BottomSheet」を選ぶ。
下の方にあるPassをクリック。

BottomSheetへ渡すparameterを設定します。
parameterは2で作った物です。
valueはContentsDocumentのReferenceです。
選んだらConfirmします。

ここまでで、ボタンタップでBottomSheetが表示されるはずです。

4.BottomSheetのアクションの設定

表示したBottomSheetで渡されたReferenceを有効にします。

bottomsheetの一番外側のcontainerを選ぶ。
Add Queryをクリック。

QueryTypeはDocumentFromReferenceを選ぶ。
自分で作ったポストのコレクションを選ぶ。今回はcontents。
setVariableは2で設定したParameterを選ぶ。今回はcontentsRef。
設定できたらConfirmします。

これで、編集と削除ボタンでポストの情報が使えるようにになりました。

5.編集ボタン押下〜編集画面へ遷移

事前に編集画面を追加しておく。今回私は、EditPostという名前です。
EditPost画面にもポスト情報を受け取るためのParameterを設定しておきます。

Editボタンを選び、AddAction→OnTap→NavigateToでEditPost画面を選ぶ。

画面下のparametersのPathをクリック。
ParameterをcontentsRefにする。(EditPost画面で設定したParameter)
ValueをcontentsRefにする。(BottomSheetで受け取ったParameter)

EditPost画面へ遷移後にBottomSheetを閉じるため、ActionFlowEditorを開き、NavigateBackを追加する。
これで編集ボタン押下でEditPost画面への遷移は完成です。

6.削除ボタン押下の処理

削除ボタンの振る舞いは下記のようにします。

• 削除ボタン押下
  • 削除を確認するアラートダイアログ表示
    • 削除OK → ポストを削除 → home画面へ戻る
    • 削除キャンセル → BttomSheetを閉じる

設定が多いのでActionFlowEditorを開きます。
Deleteボタンを選択してActionFlowEditorをクリックします。
検索でAlertDialogのConfirmDialogを選ぶ。

＋ボタンをクリックし、AddConditionalをクリック。

するとTUREとFALSEができるので
TURE側にOKボタンの処理を書いていきます。

1. BackendCallではFirestoreのポストを削除しています。
2. ShowSnackBarでは削除したことを画面へ表示させます。
3. NavigateToでポストがなくなったのでHomeへ遷移させます。
4. 最後にNavigateBackでTUREとFALSE共通のBottomSheetを閉じる処理です。

下が完成形です。
今回はBackendCallとShowSnackBarの説明だけします。

1. BackendCallの設定方法です。
   AddActionして、Firestoreを検索しDeleteDocumentを選択。
   
   SelectReferencetoDeleteではcontentsDocumentのReferenceを選びConfirmする。
   

2. ShowSnackBarの設定方法です。
   AddActionして、検索からShowSnackBarを選ぶ。
   

Valueに表示したい文言を入力します。

Homeへの遷移とNavigateBackの処理は割愛させていただきます。

今回はノーコードの説明だったため、画像の方がわかりやすいかなと思って画像を多用してしまいました。
いかがでしたでしょうか？