こんにちは。今回は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は複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FhKDyN67S8h8%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eこの記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。アプリ・Webサービスの開発の無料相談はこちらAdalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。