今日もノーコード(ローコード)の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などの構築に興味のある方は、こちらからご気軽にご相談ください。