モノレポ構成で複数のアプリを実装してみる②（Flutter × Melos）- UI編 -
ohtsuki準備編
1つ前ではアプリを環境ごとにビルドして、パッケージ情報を取得・表示する共通モジュールを作ってます。
共通のUIなどをpackageにする
こんな感じで置いていきます。
- theme: アプリのテーマ
- ui: 共通UI
- app_design: UIカタログ Widgetbook を使用
- Widgetbookを今回初めて使用したのですが 使いやすかったです。導入や実装の詳細はこのスクラップでは割愛。
melos_sample
├── apps
├── packages
│ └── widget
│ ├── theme
│ ├── ui
│ └── app_design # widgetbook用のUIデザインカタログアプリ
├── melos.yaml
├── pubspec.yaml
└── README.md
widgetの中にthemeあるのなんか違和感だけど、まあいいか。
ohtsukiデザインを確認・整理する
Figmaのこちらのテンプレートをお借りしました。UIを実装していく前にデザインファイルを確認していきます。
Food App Design UI Template by @dscodedesign
共通化しやすいように、雰囲気で以下を整理してます。
- テキストスタイル
- 色スタイル
- 部品のコンポーネント化
※デザイナーさんが親切だと最初から実装ライクに定義されてることが多い。そうじゃない場合はエンジニアから歩み寄ってこうしてくれたら嬉しいぜを伝えよう。
Widgetbookのデモを見て整理したので、PJ初手にデザイナーさんにこのデモ見せてイメージを掴んでもらうのも良さそうです。
ohtsukiボタンとボトムナビゲーションを実装
packages/widgetにそれぞれのUIやカラースキームを定義し、アプリ1と2でそれぞれimportして完成した画面がこちら。（ボトムナビ共通の見た目にしたいってあるんか？って疑問が湧いたけど揉み消した。）
| Dev App1 | Dev App2 |
|---|---|
 |
 |
ブランチはこちら
ボトムナビゲーションに使用したのがこちら
ohtsukiおまけ(Widgetbook)
おまけというかこっちがむしろこっちがメインだったのでは？と思うほどアウトプットに時間使った気もする。
今回作ったWidgetbookをFlutter Webで公開してますので興味あればご覧になってくださいませ。（今後もう少し更新される）
複数人での開発での作業バッティングをなくせる、PJ途中参加でどこに部品があるの？そもそも実装してあるの？と探す時間が減るなどのメリットありです。
あとはデザイナーさんとかPOとかPMとかサクッとUIのデザイン見て欲しい時に、デモ画面としてお見せするのも良さそうです。ブラウザぽちぽちしてiOS/Android端末別表示、ライトモードやダークモードの切替もできるのが便利でした。
（CIでmainマージ時に自動デプロイさせたい。横道にどんどん逸れてく。）