Zenn
🔥

【Flutter】monarchでFlutterの開発スピードをガッツリ高める方法🥇

2021/04/04に公開
Flutter
UI/UX
UI
tech

あぁ、このコード、前も書いたよなぁ...
探すのも面倒だし書いちゃうか！

そう思った経験ありませんか？

1回書いたコードはなるべく再利用して、効率的な開発をしていきたい！！！
今回は、Flutterでできる効率的なWidget再利用ツールを紹介します。

monarchとは


https://monarchapp.io/

  • monarchとは、Flutter Widgetを実際にレンダリングして表示することができるツール
  • ReactやVueで使われるStorybookの簡易Flutter版
  • エミュレータよりも高速にUIコンポーネントを作成できる
  • テーマ、スケール、デバイスを高速に切り替えて表示を試せる
  • monarchで作成したWidgetカタログを使うと開発スピードがアップする

monarchを使ってレンダリングイメージを共有しておけば、デザイナーさんのイメージとエンジニアの実装が違うことで揉めることも少なくなるそうな。すごく便利なツールです！

*（　´∀｀）ﾓﾅｰではありません

monarchのインストール

https://monarchapp.io/docs/install
Windows版、Mac版と2つあります。Linux版も開発中とのこと。
今回はWindows版をインストールしていきます。

  1. Visual Studio 2019のインストール

*Visual Studio Codeではないので注意！
C++によるデスクトップ開発ワークロードも一緒にインストールしましょう

  1. monarchのインストールページからmonarch_windowsをダウンロードしましょう
  2. monarch_windowsを任意の場所に解凍します
  3. 解凍したフォルダの中にあるbinフォルダのパスをコピーしておきます
  4. binフォルダのパスを環境変数に追加します
    　*環境変数の追加方法

これだけでmonarchのインストールは終了です！

monarchの実行

  1. Flutterのプロジェクトフォルダでmonarch initを実行
  2. monarch runを実行
    これだけでmonarchを起動できます。カンタンですね！

テーマ切り替えやデバイス切り替えが即座にできるのが分かります。
では、monarch上にどうやってWidgetを表示させるかを考えていきましょう！

storyの作成

  1. *_stories.dartを作成します。*はワイルドカードです。なんでも構いません。
  2. Widgetを返すメソッドを追加します。
example_stories.dart
Widget foo() => Text('foo', style: TextStyle(fontSize: 50));
Widget bar() => Icon(Icons.pets, size: 50);

3.monarchに自動的にfoo,barが追加されるので、タップするとレンダリングされます。

↑では、ボタンのcircularやelevationを変えながら一覧表示するカタログを作ってみました。
DeviceをiPhone8に変更するとBOTTOM OVER LOADEDが発生していることが分かります。
こういったデバイス間で発生するレンダリングエラーが素早く確認できるのもmonarchの魅力です。

monarchでWidgetを再利用して効率的に開発しよう！


https://dribbble.com/shots/15334842-UI-Element-Dark-Theme-Desing

dribbleのデザインを見よう見まねでコピーしたものがコチラ。
ちょっと空いた時間や、コード書く元気ないなぁ。。。って時にmonarchを使ってUIのパーツ一つだけでも作成して書き溜めておくことができます。

僕のような個人開発をしている人は、人的リソースが圧倒的に不足してしまいがち。
過去の自分をリソースとして再利用することで、本番の開発を急ピッチで進めることができる（はず）

さぁ、monarchを使って、効率開発を始めましょう！！

ぼくと、ともだちになってください。
Twitter : https://twitter.com/hagakun_yakuzai
https://twitter.com/hagakun_yakuzai

Discussion