FlutterFlowの活用
弊社では FlutterFlow を活用してスマホアプリの開発をしていますのでちょっと紹介します。
Flutter とは
スマホアプリを作成できる Flutter は iPhone, Android にととまらず Windows や Mac でのデスクトップアプリや Web システムまで作れる便利なツールです。
JavaScript/CSS/HTML で画面を構築することに比べて、 Flutter では Widget で画面を構築します。これにより Modal やアコーディオンのようなよく使う UI をわりとさくっと実装できます。また、人やプロジェクトによって UI の構築方法が異なることがない点は非常に良いです。
一方で Flutter はマテリアルデザインを意識しているので素直に作るとマテリアルデザインに沿ったものになりますが、これがあまりにもコテコテすぎるというか、マテリアルデザイン過ぎておしゃれじゃないというか。 Flutter でおしゃれな画面を作るテクニックは習得に時間がかかりそうです。 そもそも Widget で画面を構築するデメリットとして、ちょっと要素に Padding を入れるだけで Widget を追加して child 属性のネストを増やして数行のコードを書くというのが結構かったるいです。
というわけで Flutter の利点を活かしつつ UI を構築する方法が望まれていました。
そこで FlutterFlow
FlutterFlow は Flutter アプリをローコードで開発できるツールです。 つまり GUI で Flutter の画面を作ることができ、さらには画面遷移やちょっとしたフォームのコントロール、RESTful API の利用などのロジックも組むことができます。 さらには作った UI パーツをシェアして他の人が使えるようにしたり、逆に使ったりもできます。 これにより Flutter で画面を構築することが非常に楽になります。
FlutterFlow のメリット 1: ソースコードをダウンロードできる
FlutterFlow のメリットは単に画面を構築できるだけでなく、最終的に作成したアプリを Flutter のコードとして出力できるということです。 さすがに FlutterFlow だけで全てのロジックを構築するのは効率が悪く限界もあるため、ソースコードを入手できるのは非常に便利です。 しかもこのコードがわりと綺麗な上、 go router や provider のようなよく使うライブラリも導入されていて、 Flutter 初心者が書くコードよりもよほどクオリティが高いのです。
なので、弊社では
- 画面の構築は FlutterFlow でできるだけやる
- 画面ができたらソースコードをダウンロードしてロジックを構築する
- Flutter build などでリリース
という流れが必勝パターンとなっています。
FlutterFlow のメリット 2: 他の人が作ったウィジェットを使用できる
FlutterFlow では他の人が作成したウィジェットを共有する機能があり、多くのウィジェットが素材として使用できます。 そのためデザイナーがいなくても格好いい画面を作ることが可能です。
Flutter はマテリアルデザインの思想でできているので初心者が作ると、あまりにもコテコテのマテリアルデザインになりあまりおしゃれではありません。 そのため、FlutterFlow で格好いいウィジェットをシェアできるのは非常に助かります。
FlutterFlow を使えば、 Flutter をそのまま使うよりも簡単に格好いいおしゃれな画面を作ることができます。
FlutterFlow のデメリット
FlutterFlow にもいくつかデメリットがあります。
1 つ目は何と言っても動作が重いことです。作成したアプリはサクサク動くのですが、 FlutterFlow そのものの動作が遅くてイライラします。このへんは徐々に改善されていくと期待するしかありません。
2 つ目は料金が若干高いことです。月 70$ (年払いで月 50$) を支払わなければプロジェクトをチームでシェアすることもできないので、実質使い物になりません。逆に言えばこの額を払っていれば FlutterFlow のメリットを享受できるわけなので、同じことができる Flutter エンジニアを雇ったり教育したりするコストを考えれば安いと思う他ありません。
まとめ
というわけで FlutterFlow についての紹介でした。
ノイマントーキョー株式会社ではスマホアプリ開発、Web システム開発で多くの実績と高度なノウハウがあります。 開発をご用命の際にはぜひお問い合わせください。