FlutterFlowに制約はある？できることとできないこと

XI本部プロダクトイノベーションセンターアジャイル開発グループの徳山です。

前回の記事「FlutterFlow vs Adalo：ノーコードモバイルアプリ開発ツールの比較」では人気のノーコード開発ツールのAdaloと比較することでFlutterFlowとの機能の違いやメリットを紹介しました。今回は、FlutterFlowの制約について焦点を当てることでFlutterFlowを利用した開発ではどのような注意点があるのか理解を深めていただきます。

はじめに
制約
各制約について
まとめ
参考資料

はじめに

本記事の目的は、FlutterFlowの制約を明らかにし、開発者が直面する可能性のある課題を理解するための情報を提供します。
FlutterFlowの基本的な知識をまだお持ちでない方は、まず前回の記事「FlutterFlowとは？ノーコードでスマホアプリ開発を始める方法」を読んでいただくことをお勧めします。
また、本記事は2024年10月現在の内容に基づいて作成しております。

制約

FlutterFlowには多くの機能やメリットがありますが、一方で以下のような制約もあるため、本格的なアプリ開発を行う際には、それらに注意する必要があります。

デザインの制約
ロジックの制約
開発環境における制約

各制約について

1. デザインの制約

FlutterFlowは、ドラッグ&ドロップによる直感的なGUI操作で画面を作成できる点が大きな特徴です。
しかし、標準で用意されているウィジェットのビジュアルデザイン調整には限界があり、カスタムコードでの調整が必要な場合があります。検証の中で実際に遭遇したデザイン制約例をいくつか示します。

タブバーのデザインが調整できない

デザインの制約例_1
上の図はとあるサンプルアプリのデザインとFlutterFlowで実際に作成した画面の比較画像です。タブバーのウィジェットはFlutterFlowで用意されており簡単に実装できます。デザインではタブ（新着）の丸っぽい赤い下線がありこれを再現したかったのですが、FlutterFlowではカスタマイズができず再現ができませんでした。

多言語に対応していないウィジェットがある

デザインの制約例_3

FlutterFlowには動画プレイヤー用のウィジェットも用意されています。しかし、再生スピードなどの設定項目が英語でしか表示されず日本語での表示に対応することができません。

2. ロジックの制約

複雑なロジックや独自の機能を実装したい場合、カスタムコードを利用しなければ解決できない（場合によっては利用しても解決できない）制約があります。例としては下記のようなものが挙げられます。

制約例

標準でサポートしているバックエンドが限定的

標準でサポートされているバックエンドサービス（BaaS）はFirebaseまたはSupabaseに限定されています。それ以外の認証サービスやデータベース、ストレージを利用することも可能ですが、「連携することが可能なのか」、「要件に必要な機能は利用できるのか」、「セキュリティ面に問題はないのか」といった項目を別途確認する必要があります。いずれのバックエンドサービスを利用する場合でも必要な機能がない場合はカスタムコードを書く必要があるので、却ってスクラッチの開発より実装が大変になってしまうといったことも考えられます。

エラー発生時の共通処理ができない

アプリ内でエラー（例外）が起きた場合にそれを一括で処理する共通の機能を実装することができません。例えば「〇〇のエラーが起きたらエラーページを表示する」ことを行いたい場合、そのエラーが起こる可能性がある箇所に個別で処理を実装する必要があります。こうした処理の共通化はカスタムコードを利用しても対応することはできません。

リストの並び替えができない

FlutterFlowではリストの表示を行うためにListViewというウィジェットを利用できます。ListViewにはReorderbleという並び替えを可能にするためのプロパティが用意されているのですが、この標準プロパティだけでは並び替え機能を実装できません。実現するためには下記のようなカスタムコードを実装する必要があります。

List<MenuItemParamsStruct> reorderMenuItems(
  List<MenuItemParamsStruct> list,
  int oldIndex,
  int newIndex,
) {
  /// MODIFY CODE ONLY BELOW THIS LINE

  // If the item is being moved to a position further down the list
  // (i.e., to a higher index), decrement the newIndex by 1.
  // This adjustment is needed because removing an item from its original
  // position will shift the indices of all subsequent items.
  if (oldIndex < newIndex) {
    newIndex -= 1;
  }

  final newList = [...list];

  // Remove the item from its original position in the list and store
  // it in the 'item' variable.
  final item = newList.removeAt(oldIndex);

  // Insert the removed item into its new position in the list.
  newList.insert(newIndex, item);

  // Return the modified list.
  return newList;

  /// MODIFY CODE ONLY ABOVE THIS LINE
}

このように、FlutterFlowで用意されている機能でもカスタムコードの利用が前提となっている場合があります。

開発環境に関する制約

上記以外の開発手法や体制面といった制約については以下のような例があります。

制約例

ブラウザでは、テスト画面の表示に手間がかかる

テスト画面のビルドには2〜3分の時間がかかります。また、変更を反映するには都度リロードを行う必要があり、リロード後に画面が表示されるまで毎回10秒ほど時間がかかります。このように、ブラウザを利用した開発体験は快適とはいえません。
ちなみに、別途セットアップが必要になりますが、デスクトップアプリを利用したローカルでの開発機能（Local Run機能）を利用することで変更を即座に反映した開発を行うことは可能です。

カスタムコードの利用には、FlutterやDartの知識を有する開発者が必要

これまで見てきたようにFlutterFlowでモバイルアプリを開発する場合はカスタムコードを利用する場面が多くあります。特に複雑なデザインやロジックを実装する場合は避けられません。そのため、開発の経験が乏しいメンバーだけで凝ったアプリを開発したい場合はカスタムコードの実装難易度の高さから実現が難しい機能やデザインも出てくることを認識する必要があります。

複数人の開発では作業内容の管理に注意が必要

FlutterFlowではブランチ機能が用意されており、開発メンバーによって作業場所を分けながら安心して開発を進めることができます。2024年9月下旬にFlutterFlow5.0がリリースされ、自分が新しくどこを開発したかが把握しやすくなりました。一方で、FlutterFlowは日々機能追加が行われているので、まれにブランチのマージ時にエラーが起きて失敗したりします。このため、万が一のデグレーション（作業の戻り）に備えてチーム開発では変更内容をきちんと頭に入れて置いたり、ソースをGitHubに連携するなどの予備的対策が必要です。

まとめ

今回は、FlutterFlowの制約についてみてきました。
前回の記事まではメリットを中心にお伝えしてきましたが、今回のようなデメリットや制約もFlutterFlowのモバイルアプリ開発ではしっかりと理解しておく必要があります。

次回は、FlutterFlowと相性の良いBaaSであるFirebaseとの連携について解説します。

参考資料

FlutterFlow ドキュメント

執筆：@tokuyama.raido、レビュー：@nakamura.toshihiro
（Shodoで執筆されました）

電通総研テックブログ

電通総研が運営する技術ブログ