今日もノーコード(ローコード)のFlutterflowでのSNSアプリを作ってみようの記事を書いていきます。
今回は、画面遷移する際の画面間でのパラメータの渡し方についてやってみようと思います。
一覧画面から詳細画面へ遷移する、なんてことはどんなアプリでもありますよね。
その際のFlutterFlowにおけるパラメータの渡し方を書いていきます。
FlutterFlowについてそもそも知りたい方はこちら
FlutterFlowはノーコード・ローコードでかなり複雑なネイティブアプリを作れる強力なアプリ開発ツールです。以下記事に概要を書いていますのでご参考まで。
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは?Adaloとの違いも合わせて解説
まずは詳細画面を用意する
一覧画面は前回までにこんな感じで作ってありますが、

以下のように詳細ページを作ってみましょう。テンプレートを使って作るのもすぐできるのでいいと思います。

ActionのNavigate Toから詳細画面へのリンクを作成する。
以下のような感じでActionのNavigateから詳細ページ(私の場合はContentDetailページ)へのリンクを貼ります。

Defineからリンクを定義する
Navigateの設定の下の部分に以下のようなDefineというのがあります。これはその画面へのパラメータを定義するところです。まずはこちらで定義しましょう。

以下のようにParameterNameを自由に決め(contentRefなどの名前がわかりやすいと思う)、DocumentReferenceを選び、Collection Typeをcontentsにします。

そうすると、元の画面に以下のように「Pass」というボタンが現れます。

Passを押し、以下のようにcontentsRefにDocumentReferenceでcontentsとして設定します。

これだけで次の画面にcontents情報を渡すことができました!
「パラメータの受け渡し」機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。
