こんにちは、今回はFlutterFlow(フラッター・フロー)で管理画面を作る方法について書いていきたいと思います。

管理画面もアプリを作る時と同様、比較的簡単に作れます。ただ、アプリをユーザー側と管理側で別のアプリとして作る場合、同一firebaseにする必要があるので、その辺について書いていきたいと思います。

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

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

では解説していきますね。細かいことは最後の方で紹介している動画で解説するとして、ここではポイントをかいつまんで解説します。

まずはユーザー側のアプリを普通に作る

まずは普通にユーザーアプリを作ります。

(そもそもアプリの作り方を知りたい方はhttps://citrusapp.jp/posts/flutterflow-snsapp1 もご覧ください。)

通常のfirebaseの設定を行ったのち、
その後、私の場合は以下のように一覧画面を作りました。

データベースは以下のようにusersとcontentsというコレクションを作ってます。

管理者側のアプリを作る

では管理者側のアプリを作りましょう。

最初のFirebaseの設定の際に、以下のFirebase Project IDを、元のアプリ側の時に作ったIDと同じものにします。
そしてConfigFileをGenerateしましょう。

これでOKです。接続できました。
ただし一つ問題があります。

注意点:Firebaseを接続してもCollectionは反映されない...?

Firebaseのデータベースのところにいくと、以下のように何も表示されません。

そう、接続されてもCollectionは表示されないようです、、、汗

なので手打ちでCollectionとフィールドを作成しなければならないです。名前が違うと動かないので完全に同じコレクション名・フィールド名で作成します。(元アプリのCollectionのコピー&ペイストは可能なようです。)

ここまでできればあとは普通に管理画面を作成するだけです。管理画面から投入した内容はFirebase側に連携され、アプリでも反映されてることを確認できます。

ぜひやってみてください。

FlutterFlowでの管理画面作成をYoutube動画で見たい方はこちら

アプリと管理画面の連携について、動画の方で詳しく解説していますので、気になる方はこちらもどうぞ。

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

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

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか?

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

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

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