FlutterのUI作成ツールを試してみた
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ツールのニーズはあるということなんでしょうね。
関連(するかもしれない)記事
おススメ