【FlutterFlow】Execute Callbackを使ってみよう

コンポーネントの中で実行された結果をコンポーネントを使っている外部のページに渡すことが出来るのがExecute Callback機能です。使えるようになるとアプリ開発の効率化がかなり向上するので是非マスターしたいですね。

公式サイトで実行している内容をトレースしながら使い方を解説していきます。

Execute Callbackの概要

FlutterFlowのExecute Callbackは、コンポーネント内で行われたアクションを外部のページで利用できるようにするための機能です。
通常、コンポーネントをページに追加する際には、コンポーネント全体をタップすることでアクションを定義することができますが、コンポーネント内で行われたアクションを外部のページに送ることはできません。Execute Callbackを使用することで、コンポーネント内で行われたアクションを外部のページで利用することができます。

公式サイトでは以下のような図で示されています。

Execute Callback | FlutterFlow Docs

docs.flutterflow.io

ゴールイメージ

公式ページのガイドと同じですが、コンポーネントで画像を選択し、選択した画像をそのコンポーネントを使っているページ内で表示します。

以下のように画像をアップロードするボタンの箇所はコンポーネントになっています。

実装方法

コンポーネントの作成

• コンポーネントを作成します。今回は”New Component” > “Create Blank”から作成を開始します。
  名前は”ImageUploader”にしておきます。

• パーツは以下のようにコンテナの中にtextとボタンだけ配置します。

はい、これでコンポーネントの作成は完了です。

画像を表示するためのページを作成

• ブランクのページにとりあえず、Imageと先ほど作成したコンポーネントを配置します。
  今は配置しただけで何もアクションを設定していません。

コンポーネントにCallback actionを設定

• コンポーネントを表示し、画面右端のメニューからComponent Parametersを設定します。
• 設定内容は以下の画像の通りです。TypeはAction、Action ParameterはImagePathを設定してください。

メインのページでcallback actionを設定

• メインのページ（画像を表示するページ）に移ります。
• まずは、画像を格納するためのPage Stateを作成します。
  今回はField Nameを”imagePath”、Typeは”ImagePath”にしておきます。（デフォルト値を設定しない場合はNullableにチェックを入れておいてください）

• ImageUploaderのコンポーネントを選択し、右側にあるメニューの最下部の”Action Flow Editor”を選択します。

• 画面上部が”Callback”になっています。

• ”Add Action”から”Update Page State”を選びます。設定する値は”Callback Parameters”の”imageURL”を設定します。

callback actionをトリガーする

• コンポーネントに移り、callbackアクションの動作を設定します。Uploadボタンのアクションに”Upload media”、アップロード先に”Firebase”を選択します。

• その後、２番目のアクションとしてExecute Callbackを選択します。
  Execute CallbackではimageUploadActionを選択し、imageURLのパスとしてアップロードした画像のURL（Uploaded File URL)を選択します。

画像のパスを変更

• 最後に表示する画像のPathを変更します。Page stateのimagePathを設定してください。
• 画像のデフォルトのURLも設定しておいてください。（適当な画像のURLで結構です）

これで完成になります。

まとめ

今回はExecute Callbackの使い方を解説しました。

Execute Callbackを使うことでコンポーネントで取得したデータを外側のページで利用可能となります。これによってコンポーネントの利用シーンが格段に向上して生産性は爆上がりです！

とても便利な機能ですが、何となくわかりにくかったかと思います。私もまだよくわかっていませんが、、

何度か使っていれば理解出来てくるかと思うので頑張ってトライしてみてください。