こんにちは。今回はFlutterFlowでSNSアプリを作ってみる企画の第二回です。

今回は登録機能を作っていきたいと思います。

このページではざっくりとした流れを解説しつつ、詳細は最後に動画でも説明してますので、細かい点は動画の方もみてみてください。

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

FlutterFlowはノーコード・ローコードでかなり複雑なネイティブアプリを作れる強力なアプリ開発ツールです。以下記事に概要を書いていますのでご参考まで。

ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？Adaloとの違いも合わせて解説

一覧画面に登録ボタンを設置

まずは一覧画面に以下のように登録ボタンを設置します。

私の場合はテンプレートを流用してボタンイメージだけ変えました。

コンテンツ登録ページ（記事投稿ページ）をテンプレートから選択

FlutterFlowのすごいところの一つに、テンプレートの充実さがあります。

かなりの数のテンプレートがあり、デザイン性も高く、実際のアプリで使えそうなものが多いのも魅力です。

今回は↑Create Postというドンピシャなテンプレートがあったのでそれを使います。

こんな感じですね。

Home画面からCreate PostへNavigate Toで遷移させる。

以下のように、Home画面の右側の矢印アイコンからNavigate ToでCreate Post画面へ遷移させます。

Create Post画面のUI変更

今度はCreate Post画面側にいき、さっきのテンプレートの項目をベースに必要な項目を追加、不要な項目を削除します。

こんな感じです。

画像アイコンをクリックした時のアクションを定義

以下のように、画像アイコンをクリックした時の挙動を定義します。

Uploaded media to Firebaseを選びます。

PhotoだけではなくVideoも選択できるのは素晴らしいですね。また、カメラかギャラリーかも選択でき、複数イメージにも対応しています。

ボタンを押下時のアクションで「Create Document」

以下のように、Create Document を選択し、Collectionはcontentsを選び、各項目をSet Fieldしていきます。

例えば、post_titleであれば、Value SourceをFrom Variableにし、WidgetのTextFieldを選びます。

ただし、画像の場合はちょっとだけ違っていて、先ほど画像登録のアクションを定義したことにより、Uploaded File URLを選択できるようになっているので、こちらを選択します。

Youtube動画で確認したい方はこちら

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

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

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

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

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

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

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