FlutterFlowを使ってノーコードでFlutter製TODOアプリを作ってみた
こんにちは。CX事業本部のKyoです。FlutterFlowというツールを使ってみたのでレポートします。
FlutterFlow is 何？
いわゆるローコード・ノーコード系のツールで、モバイルアプリ用のフレームワークであるFlutter製のアプリを開発することができます。
特長としては、ブラウザ上で開発を行え、Fluterのコードとしても出力できることが挙げられます。また、Firebaseをバックエンドとして利用でき、認証やデータの保存などはFirebaseに任せることもできます。
今回はフリープランで試していきます。
お題: TODOアプリ
アプリケーションの学習には、認証 + CRUDという基本要素の詰まったTODOアプリを作ることが多いと思います。今回もTODOアプリを作ってみました。
公式ブログでも解説 + 材料の提供がされていますね。
なお、公式ブログから完成版のサンプルアプリも公開されています（認証を含むので、ご利用は自己責任でお願いします）。
作業風景
詳細な作業手順は前述の公式ブログにあるのでここでは雰囲気をお伝えします。基本的にはドラッグ&ドロップでUI要素を配置、そこに関わるイベントを設定するという流れです。
Googleアカウントによるサインインの設定
画面左側のウィジットツリーからSign in with Googleコンポーネントをドラッグ&ドロップします。
先ほど配置したコンポーネントをクリックし、プロパティパネルから”+ Add Action”をクリックします。
“Select Action”からFirebase Authetication → Log Inを選択します。
“Auth Provider”をGoogle, “Collection”をusersに設定します。
TODOの一覧表示の設定
Backend Queryという機能でユーザがページに遷移した際にFirebaseからTODOの情報を取得します。
UI内の要素に取得した情報のどのフィールドを反映させるかを指定します。
TODOのスキーマは以下のような形です。
動かしてみる
成果物はブラウザ上で動作させる、もしくはダウンロードして実行することができます。今回はブラウザ上で動作確認を行いました。
画面左上の稲妻マークから実行できます（準備に2-3分かかります。）。
何画面か表示してみます。
ログイン画面
TODO作成画面
TODO一覧画面
コード表示
最後にコードを表示してみます。
それぞれ200-400行ぐらいでした（設定値ファイルは除く）。
所感
はじめてFlutterFlowに触れるところから始めて数時間で小綺麗なToDoアプリができました。私はサーバーサイドエンジニアでFlutter, Firebaseともに利用経験はなかったのですが、それらが問題になることもありませんでした。
Flutterのコードが生成されるので、MVP（Minimum Viable Product）をFlutterFlowでプロトタイピングし、複雑な機能はFlutterで実装してく、という開発スタイルも取れそうです（有料プランだとGithubとの連携もできるとのこと）。
また、ドキュメントやサンプルアプリが豊富なのも心強いですね。
まだまだ便利そうな機能がありそうですが、一旦は以上です。
