はじめに
株式会社インプルの渡部です。
最近Flutterのローコードツールである「FlutterFlow」を触ったところFlutter開発でFlutterとFlutterFlowを併用することでかなり強力なツールになりそうだったので今回紹介しようと思います。
FlutterとFlutterFlowの違い
Flutterとは
「Flutter」とは、 Google社が開発したマルチプラットフォームの開発フレームワークです。
Flutter は iOS、Android、ウェブ、Windows、MacOS、Linux の 6 つのプラットフォームがサポートされており「Dart」という言語だけで各プラットフォームに応じたアプリを開発できます。従来のアプリ開発ではプラットフォームに応じた個別の技術を習得して開発する必要があったので複数のプラットフォームに対応したアプリをまとめて開発・管理が出来る点から多くの開発者に支持されています。
FlutterFlowとは
「FlutterFlow」は前述のFlutterがベースになっているローコードツールです。
Flutterではソースコードを書いてアプリ開発を行うのに対してFlutterFlowではソースコードをほとんど書かずにアプリ開発を行うことが出来ます。もちろんAndroidとiOSのモバイルプラットフォームに加えWebアプリの開発にも対応しています。
GUIベースでドラッグ&ドロップでアプリ開発を行うので従来の開発と比較してなんと10倍もの速度でアプリの構築ができるそうです。
FlutterFlowの特徴
ドラッグ＆ドロップで画面構築できる
ノーコードツールやローコードツール全般に言えることですがソースコードを書かずにドラッグ&ドロップで画面が構築します。デフォルトで80以上のWidgetと170以上のコンポーネントが用意されており入力フォームやサイドメニューバーなどよく見かけるようなデザインはあらかじめ用意されているコンポーネントから実装するデザインに近いコンポーネントを選択してそれをベースに構築することもできます。また、画面遷移や条件分岐など複雑なロジックも視覚的に処理できるのでアプリ開発やプログラミング経験が浅い方でも手をつけやすいです。
公式にもいくつかデモが用意されていますが画面構成や処理が複雑でもGUIベースで容易に実装が可能なので大規模開発では大幅な工数削減が見込めそうですね。
外部ツールの使用が簡単
FlutterFlowではFirebaseやstripe、GitHubなどデータベースから開発用ツールまで幅広くサポートれています。もちろんAPIから他のサービスも使えますがサポートされているツールが多いのでよく使うものについてはある程度揃っています。
コード生成
私としてはこのコード生成が一番の強みだと思っているのですがなんとFlutterFlowで画面を作成したらそのまま作成した画面のソースコードを自動生成することができます。さらに、状態管理についてもStatefulWidgetを使用した状態管理をFlutterFlow上で実装できるので小規模開発や状態管理が複雑ではない場合は状態管理までFlutterFlowで完結させてソースコードをFlutterプロジェクトにコピペするだけでアプリ完成なんてことも出来てしまいます。ただし、Riverpodのようなサードパーティ製の状態管理ツールには対応していません。ちなみに、私は状態管理はRiverpodを使用することが多いので画面だけstatelessWidgetとして作成し、コードを生成してから状態管理はコードを書いて実装を進めるというやり方をしています。
まとめ
いかがでしたでしょうか？
今回はFlutterFlowについて少し紹介しました。私はFlutterFlowで大まかに画面を作成してコード生成をしてからエミュレータで画面を見ながら少しずつデザインを微調整という使い方をしています。テンプレートも豊富なのでテンプレートから実装したい画面に近いを選択して実装画面を近づけていくやり方をしても普通に実装するよりも早く実装できるかもしれませんね。