FlutterでMaterial 3を最大限に活用してUI開発スピードUP ！

:::note
[mobile.stmn #8](https://stmn.connpass.com/event/331381/) の発表資料です
:::

## プロフィール
<img widt="64" src="https://lh3.googleusercontent.com/a/AEdFTp5FjP21RoapIGFh5uMV4any1D44WAlqdIkuHrnat5g=s128-c" />

* 👤 Tomoki Kobayashi / @temoki
* 🌐 bento.me/temoki
* 📱 日本に iPhone 上陸時からアプリ開発している Apple 信者
* 👩‍💻 でも業務でアプリ作るなら Flutter 激推し

---
## なぜ Flutter なのか？
* iOS/Android 同じ仕様で作るの大変（コミュニケーションコスト）
* iOS/Android 各プラットフォームにUI最適化も大変
* 成熟した Material Design は Apple 信者から見ても良い（異論は受け付けない！）
* 皆 iPhone でも Google 製アプリや他の Flutter 製アプリで慣れてきているし
* ホットリロード最高（不安定になることもほぼない）
* Flutter も成熟してきてヌルヌル動く（Impeller）し開発で困ることもほぼない
* (状態管理パッケージの Riverpod 大好き)

---
# なぜ Flutter なのか？ つまり、
* ✅ うまい（クオリティ）
* ✅ はやい（開発スピード）
* ✅ やすい（開発・運用工数）

👉 事業貢献に直結する！!

---
# もっともっと開発スピードをあげたい

---
## UI実装のだるいところ
スタイルの適用がだるい
```dart
return FilledButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: WidgetStateProperty.all<Color>(Colors.pink),
    minimumSize: WidgetStateProperty.all<Size>(Size(64, 44)),
  ),
  child: Text(
    'I love Flutter ❤️',
    style: TextStyle(
      color: Colors.white,
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
  ),
);
```

---
## UI実装のだるいところ 👉 共通化しよう①
Theme Extension で共通化しよう！
```dart
final myButtonStyles = Theme.of(context).extension<MyButtonStyles>()!
final myTextStyles = Theme.of(context).extension<MyTextStyles>()!
return FilledButton(
  onPressed: () {},
  style: myButtonStyles.hogeHogeStyle,
  child: Text(
    'I love Flutter ❤️',
    style: myTextStyles.fugaFugaStyle,
  ),
);
```

---
## UI実装のだるいところ 👉 共通化しよう① 👉 😭
Theme Extension で共通化してみたものの、画面によってちょっとずつ違う
```dart
final myButtonStyles = Theme.of(context).extension<MyButtonStyles>()!
final myTextStyles = Theme.of(context).extension<MyTextStyles>()!
return FilledButton(
  onPressed: () {},
  style: myButtonStyles.hogeHogeStyle.copyWith(color: Colors.red),
  child: Text(
    'I love Flutter ❤️',
    style: myTextStyles.fugaFugaStyle.copyWith(fontWeight: FontWeight.w700),
  ),
);
```

---
## UI実装のだるいところ 👉 共通化しよう② 👉 😭
共通の Widget を作ろう！ 👉 柔軟性に欠ける 😭
```dart
return MyAwesomeButton(
  onPressed: () {},
  title: 'I love Flutter ❤️',
);
```

---
## 理想系

```dart
return FilledButton(
  onPressed: () {},
  child: Text('I love Flutter ❤️'),
);
```

---
## 理想系の実現のために
Material Design（今なら **Material 3** ）をちゃんと使う
* `ThemeData` をちゃんと活用する
* `ColorScheme` を適切に定義する
* `TextTheme`, `~ButtonTheme` なども適切に定義する

👉 当たり前なのだけど、これが難しい。なぜか？

---
## 理想系の実現が難しいのはなぜか？
* そもそも Material 3 ベースでデザインされていない
* デザイナーもエンジニアも Material 3 を理解するのが大変
* アプリに独自の世界観を作りたい...うんぬんかんぬん

👉 だいたいこういうので詰む。でも、

---
# せめて新規のプロジェクトで Material 3 準拠を検討されることをオススメしたい！

---
## (事例) デザインシステムに Material 3 採用 🎉
* 次の新規プロジェクトは Material 3 採用が決定
* デザインシステムは自社ブランドカラー/フォントを Material 3 のカラーシステム・タイポグラフィに適用するくらいで 95% くらいは M3 に準拠
* 敏腕デザイナーさんが M3 ドキュメントと Figma の Design Kit を完全？に理解したおかげ 
* カラーシステムをうまく作ればアプリの世界観もちゃんとでる

👉 Flutter で ThemeData などの基盤を整備し画面構築中。めちゃめちゃ生産性高い！

---
## M3 は世界で最も揉まれたデザインシステムなのである
* 公式の [Material 3 ドキュメント](https://m3.material.io)
* 公式の [Material 3 Design Kit](https://www.figma.com/community/file/1035203688168086460)
* Flutter に標準搭載 (未実装な部分もあるけど)   

👉 これに僕たちはうまく乗っかるだけで良いのだ

---
## まとめ
* 開発スピードUPのために Material 3 準拠を検討されることを強くオススメしたい！
* デザイナーもエンジニアにもとても幸せな世界が到来する！