技術記事

micomia株式会社の畑井です。
今回はFlutterFlowでアプリを開発する際にデザイナーの方が知っておくべきことを4つ紹介します。
対象は、主にモバイルアプリのデザイナーの方になります。

1.FlutterFlowとは

FlutterFlow（フラッターフロー）はアメリカ発のローコードアプリ開発ツールです。
ドラッグ&ドロップなどの簡単な操作でアプリを開発できるのに加えて、コードを書いてノーコードで表現できないことを補完することもできます。

FlutterFlowについて詳しく知りたい方はこちら

2.できないこと①-TextFieldの枠にグラデーション

テキストを入力できるWidgetであるTextFieldの枠に色をつけることができますが、枠の色にグラデーションを入れることはできません。
Text Widgetの上にContainer Widgetを重ねてグラデーションを表現する方法もありますが、入力文字数に応じて高さが変わるTextFieldのようなWidgetはグラデーションを入れない方が無難です。

3.できないこと②-プログレスバーのグラデーション

進捗を示すプログレスバーと呼ばれるWidgetでは、進捗を示す色がついている部分をグラデーションにすることができません。

4.できないこと③-アイコンをグラデーションにする

GoogleのMaterial IconやFont Awesomeのアイコンを利用する場合、そのアイコンの色にグラデーションを採用することはできません。

FlutterFlowではアイコンに色をつけたい場合、単色しか選ぶことができないためグラデーションのアイコンを入れる場合は、Figmaなどのデザインツールからpng形式などでエクスポートして画像として扱う必要があります。

5.できないこと④-画面内のテキストなどを自由に動かす

PowerPointでは自由に図形を置いたり、テキストを置いたりするような操作感で進めることができますが、FlutterFlowではそのような操作感のアプリを作ることができません。

コードを書いて補完することができるエンジニアがチーム内にいれば可能ですが、それが難しい場合、そのような操作をアプリ内で実現することが難しいです。

6.まとめ

FlutterFlowは、デザイナーでも直感的にアプリUIを作れる優れたツールですが、「コードを書かない」という特性上、表現に制約があることも理解しておく必要があります。

開発とデザインはしばしば認識のズレが生まれやすい分野ですが、FlutterFlowの"できないこと"を知っておくことで、無理のない設計とスムーズな開発連携が実現できます。

また、micomiaではFlutterFlowでは作るのが難しくコードを書く必要がある機能に関しましても実現可能かご相談を承っておりますのでお気軽にご連絡ください。