FlutterのUI作成ツールを試してみた

2020/02/06

Flutterでちょっとした画面モックを作りたいことってないですか?デザイナーさんに依頼するほどではないけどそこそこ整った見た目にしたい、みたいなこと。自分は結構あります。

そういうときにコードをガシガシ書くんじゃなくてGUIでサクッとできないかなー、と思ってその手のツールを調べてみました。

UI作成ツール

Flutter Studio

Web上でUIを作れるツール。機能はシンプル。保存機能がないのでレイアウトは作り捨てです。

恐らく2018年中ごろから更新されていないのが一番の難点。この2年でFlutterだいぶ進歩したし、UI周りに破壊的な変更も入っているはずなので、追従してくれないのは実用面考えると厳しい。

Flutter App Builder

Flutter Studioとよく似ています。両者の関係性が分かりませんが、ソースコードのベースは共通じゃないかなー。

Website Source Code For Sale.Contact on Fiverr : https://fiverr.com/itmasterdev

らしい… 今後にあんまり期待できない…

Widget Maker

Flutter StudioやFlutter App Builderと比べると期待が持てそうですが、まだAlpha Versionとのこと。触ってみた限りではまだこなれていない印象を受けました。今後に期待、といったところでしょうか。こちらも保存機能がありません(将来的につく気はする)

Webベースではなくネイティブアプリで、2020年2月時点ではWindows版のみです。

もともと Flutter-IDE という名前のOSSとして作っていたものを破棄し、closedに開発しているようです。以下はFlutter-IDE時代のmedium記事。

現時点での完成度がまだまだな上、将来的にOSSになるのか、有償化するのかが不透明なのも気がかり。

近い領域のツールたち

Supernova Studio

プロトタイピングツールというくくりででしょうか。SketchやAdobe XDのファイルが読み込めて、モバイルアプリのソースコードを吐き出せます。iOS、Android、React Native、Flutterに対応。

いまはMac専用アプリですが、2020年中には他OS版も公開予定とのこと。Web化するのかな?

現時点で使える、という意味ではこれ一択ですね。

Adobe XD + Flutterプラグイン

Adobe XDからFlutterにexportするプラグインです。2020年の早い時期に利用可能になる予定。AdobeとGoogleが共同で取り組んでいるとのことなので完成度に期待が持てます。

HotUI

Flutter公式が開発している機能。IDE統合のプレビューです。今回の用途とはちょっと違いますが、実用性という意味では一番かも。


まとめ

UI作成ツールはちょっと触ってみる程度ならアリですが、実案件レベルで使うのは厳しいですね… 強いて言えばWidget Makerの将来性に期待、でしょうか。

デザイナーさんとの連携はSupernova StudioなりAdobe XD + Flutterプラグインなりが成熟するかどうか。うまく行くとスムーズに連携できる未来が待っているかもしれません。

HotUIは普通に開発ツールとして期待。

ということで、モック作るときは頑張ってコードを書きましょう、という身も蓋もない結論になりました。

余談

どちらの書籍もFlutter Studioに言及している箇所ありますね。実用性はさておきGUIツールのニーズはあるということなんでしょうね。




おススメ