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 準拠を検討されることを強くオススメしたい！
- デザイナーもエンジニアにもとても幸せな世界が到来する！