mobile.stmn #8 の発表資料です

プロフィール

👤 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実装のだるいところ

スタイルの適用がだるい

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 で共通化しよう！

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 で共通化してみたものの、画面によってちょっとずつ違う

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 を作ろう！ 👉 柔軟性に欠ける 😭

return MyAwesomeButton(
  onPressed: () {},
  title: 'I love Flutter ❤️',
);

理想系

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 ドキュメント
公式の Material 3 Design Kit
Flutter に標準搭載 (未実装な部分もあるけど)

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

まとめ

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