Flutterで実装するCompound Pattern

参照:
- https://www.patterns.dev/react/compound-pattern/
- https://github.com/takashi0602/compound_pattern_sample

Transcript

1. Flutterで実装するCompound Pattern たかし
2. 目次 - はじめに - 自己紹介 - Compound Patternとは - 完成デモ - Flutterで実装する - おわりに
3. はじめに
4. はじめに - 今回の発表は「Compound Pattern最強！」という話ではありません - Flutterでどう実装するかにフォーカスしています - 設計手法のひとつとして参考になれば幸いです
5. 自己紹介
6. 自己紹介 - 名前：たかし（たかはしひであき） - 所属：株式会社ゆめみ - 役職：Flutterエンジニア兼フロントエンドエンジニア - 最近： - YUMEMI Accessibility Guidelines β版公開しました
7. Compound Patternとは
8. Compound Patternとは - 複数の小さなコンポーネント（ウィジェット）を組み合わせて、ひとつの再利用可能な UIコンポーネントを構築するための手法 - Flutterはウィジェットを組み合わせて UIを構築していくので、 Compound Patternと似ている - 特徴： - 責務の分離 / 状態の共有 / 柔軟な組み合わせ - 親コンポーネントが状態を持ち、子コンポーネントにその状態やロジックを共有しつつ、それぞれの 責務に応じて分離された UIを構築する
9. • 参照: https://www.patterns.dev/react/compound-pattern/
10. 完成デモ
12. Flutterで実装する
13. Flutterで実装する - ユーザーのプロフィールをカードに表示するUserProfileCardコンポーネント - アバター・名前・年齢・趣味・フォローする /フォロー中ボタンを持つ - https://github.com/takashi0602/compound_pattern_sample
14. モデル
15. スコープ（状態の共有）
16. 子コンポーネントの定義
17. 子コンポーネントの定義
18. 親コンポーネントの定義
19. 親コンポーネントの定義
20. コンポーネントの使用
21. おわりに
22. おわりに - 親で状態を持ち、子でUIを構成することで、再利用性が高く、責務の分離にも優れ た設計になる - sealed classを用いて子の型を限定することで、コンポーネント使用側が扱いやす くなる - コンポーネント使用側の裁量で、UIの表示内容を柔軟に制御できる
23. おしまい