ノーコードでFlutterアプリが作れるFlutterFlowが便利すぎた話

FlutterFlowとは

FlutterFlowは、ノーコード･ローコードでFlutter製アプリの作成ができるツールです。

特徴

• ノーコードでの開発が可能
• カスタムコードを埋め込むこともできるため拡張性が高い
• ブラウザ上でも開発が可能
• バックエンドとしてFirebaseが連携可能
• Flutterのコードとしても出力可能

対象者

上記のような特徴から、FlutterFlowはプログラミング初心者〜Flutter中級者の方におすすめです。

• プログラミング初心者･Flutter未経験者

  プログラミング初心者･Flutter未経験者でも、GUIを使用した直感的な操作でモバイルアプリケーションを構築することができます。

• Flutter初心者〜中級者

  ソースコードのダウンロードやカスタムコードの挿入も可能であり、基本的な部分をFlutterFlowで構築した上でこだわりたい部分については別途作成することもできるため、Flutter初心者〜中級者も開発を効率的に行うことが可能になります。例えば、とりあえずモックを作ってみたいといった場合にもいいと思います。

ただ、既に動き始めているサービスを移行する等は、構築の簡単さや速さといったFlutterFlowの利点があまり活かせないため、イマイチ向いてないように感じます。

使用感

FlutterFlowを使用してみて良いと感じた点

• ログイン画面やチャットなど、さまざまなページのテンプレートが豊富である点

  →Flutter未経験やデザインが得意でないエンジニアでも簡単にそれっぽい画面が作れる

• Firebaseと連携が取れるので認証等の面倒な実装が不要

  →GUIを使用してFirebaseと連携やその設定ができるため非エンジニアでも簡単に認証等の面倒な部分の実装ができる

• 基本的なことはGUIで完結できる点

  →データの取得だけでなくそのフィルターや並び替えなどもGUIでポチポチ構築できるのでIT初心者でも簡単に機能の実装ができる

  Actionの出し分けを行う際の条件分岐もGUIベースで直感的に書くことができる

• とにかく早く作れる

  →テンプレートが豊富なうえ、Firebaseとの連携や設定が容易なため、簡単なアプリであればテンプレートを少し変えるだけで完成出来そうです。

FlutterFlowを使用してみて引っかかった点

• いくらノーコードツールとはいえ、多少はFlutterを理解していないとデバッグ時の修正に少し時間がかかってしまう

  →Flutter初心者の私は、Flutterならではのエラーの修正に多少手間取ってしまいました。プログラミング全くわからないしググり方も分からないけどすぐに作りたい！とかだとちょっときついかもしれません。
  とはいえ、不可能な実装は、そもそもGUIでの挿入ができなかったりエラーを表示してくれたりするので、基本的には親切だと思います。

• 日本語のドキュメントが少ない

  FlutterFlow自体は初心者でも使いやすいツールですが、日本語のドキュメントが少ないため、英語が苦手な初学者にとっては導入ハードルが少し高いかもしれません。ですが、英語での解説ではあるもののYoutubeに動画も上がっていたりもするので”全く操作方法がわからない”といったことにはならないかと思います。

料金体系

現在(2023年1月)Free,Stamdard,Pro,Teamの4形態が存在 (公式サイト)

Free　無料

アカウント作成が必要だが、無料で作成可能

• コアプラットフォーム機能
• 事前実装済みのテンプレート
  • 標準コンポーネント
  • カスタムWidget
  • カスタムFuctiion
  • 画面テンプレート
• Firebaseとの統合
• 2つまでAPIエンドポイント
• 作成可能

Standard　$30/月額($22/年間プラン利用時月額)

• APKダウンロード
• コードのダウンロード

Pro　$70/月額($50/年間プラン利用時の月額)

• AppStore/PlayStoreへのデプロイ
  →Flutterflowから直接Appstore,GooglePlayで公開するためには、Proプラン以上が必要
• GitHub統合
• Google翻訳でのワンクリックアプリ翻訳
• チャットサポート

Team　$70/ユーザーあたり月額($50/年間プラン利用時のユーザーあたり月額)

• 請求の管理
• 共有デザインライブラリの使用

(※エンタープライズ価格も存在)

とりあえずアプリの作成がしてみたい！という場合にはFreeプランから初めて必要に応じでグレードアップしていくのがいいかもしれません。AppStore/PlayStoreへのデプロイを考えている場合やバージョン管理をきちんと行いたい場合にはProプラン以上での使用が必須になってきます。

基本の使い方

アプリ作成の流れ

1. プロジェクト作成

テンプレートから作成するかBlankから作成するか選択ができます。

2. ページの作成

Pagesを追加して画面を追加できます。

3. 画面の作成

Pages内にWidgetやComponentを配置することで画面の作成が可能です。
Widget一覧パネルからドラッグ&ドロップで画面に配置するだけでなくCustomComponentやCustomCodeWidgetを自作しそれを配置することも可能です。

4. 3で作成した要素に機能や動きを追加

3で設置したWidgetにActionを設定します。(ボタンタップ時にページ遷移する等)
Firebase連携をしている場合は認証や接続も実装します。(GUI上で実装可)

主な要素･機能

Widget

FlutterのUIを構築している要素のこと (e.g.Container,Button,Text…)

Action

配置したWidgetに対して設定可能
CustomFunctionを設定することもできるが、NavigationやAlertなどの基本的なものはデフォルトで用意されており、それらや条件分岐などもGUIで設定できる

デフォルトで使用できるAction一覧については公式Docs-List of Actions参照

CustomComponent/CustomCodeWidget

GUIでCustomComponentを,コードベースでCustomCodeWidgetを作成できる
Parameterの受け渡しの設定もGUIで管理可能 (IntやStringなどだけでなくAction等もParamとして受け渡しできる)

CustomComponentはテンプレートも豊富にある