【初心者向け】FlutterFlowでSNSアプリを作ってみよう①ノーコード開発会社の選び方｜開発実績127件の技術者が6つの必須確認項目を解説

こんにちは。今回はFlutterFlowでSNSアプリを作ってみたいと思います。

FlutterFlowはノーコード・ローコードでかなり複雑なネイティブアプリを作れる強力なアプリ開発ツールです。

以下の記事もご参考まで。

FlutterFlowは、ゼロから作る「スクラッチ開発」と比較するとかなり簡単に短期間で作れますが、それでも他のノーコードツールと比較すると難易度は高く、学習期間も長くかかります。

今回は、初学者向けにFlutterFlowのアプリの作り方を書いていきたいと思います。

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

FlutterFlowとFirebaseの初期設定

まずはFlutterFlowとFirebaseの初期設定が必要です。

その辺はこちらを参考にしてみてください。

ホーム画面を追加します。ホーム画面はSNSの一覧画面っぽいのがいいのですが、ゼロから作るのも面倒なのでテンプレートから選んでみます。

結構素敵なテンプレートが多い印象なので、これらを使ってカスタマイズするのがいいと思います。

まずはデータベースにコレクションを追加しましょう。記事を投稿する画面を作りたいので記事データを入れておく「Collection」というデータを作ります。

（ユーザーデータを格納するUsersというCollectionは初期化するときに自動生成しておきましょう）

ListViewはその名の通りリストなので、この中に入れたものを繰り返し表示することができます。

テンプレートには不要な項目もあるので削除し、そしてメインのコンテンツをListViewの中に入れましょう。

ListViewの右側のパネルの左から3番目のアイコンをクリックすると「Add BackEnd Query」というものが現れます。

これはデータベースからデータをとってくる命令を作れるところですね。

今回は、Query Collectionを選択し、Collectionをcontentsにし、そしてQueryTypeをList of DocumentにすればOKです。

データベースからcontentsのリストを取ってこれたので、今度はその値を画像やタイトルに設定します。

↑上記画像のように、Imageを選択し、Image TypeをNetworkにし、Pathのところからcontents Documentのpost_urlを選択します。

次はタイトルですね。↑上記画像のように、タイトルにしたいTextを選択して、「Text」の領域からcontents Documentのtitleを選択しましょう。

これでシンプルな一覧画面の設定は完了です。

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

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

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

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

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

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