OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024

Flutter SDK は、Google の Material Design と Apple の Human Interface Guidelines に準拠したテーマ (Material Theme, Cupertino Theme) と関連 API を提供しており、これにより OS 標準のデザインに沿ったアプリ開発が容易になります。
しかし、独自のデザインシステムを採用したい場合にテーマ管理が複雑化したり、OS 標準のデザインシステムアップデートに伴う破壊的変更により開発コストが増大したりする可能性があります。本セッションでは、Flutter のテーマと各 Widget のスタイルの関係性を掘り下げ、OS 標準のデザインシステムへの依存を軽減するテーマ管理のアプローチを発表します。
これにより、独自のデザインシステムの実現や、OS 標準のデザインシステムアップデートの影響を最小限に抑えることを目指します。
加えて、Flutter Roadmap でも触れられている blankcanvas の最新動向についても解説します。

Transcript

1. OS 標準の デザインシステムを 超えて - より柔軟な Flutter テーマ管理
2. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Agenda
3. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Keywords
4. スタイル テーマ コンポーネント Keywords https://docs.flutter.dev/ui/widgets/material https://m3.material.io/styles/color/system/overview https://developer.android.com/design/ui/mobile/guides/styles/themes
5. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Theme in Flutter
6. Flutter が対応しているテーマ https://m3.material.io/ Theme in Flutter https://developer.apple.com/design/human-interface-guidelines
7. テーマにまつわる Widget の関係性 Theme in Flutter MaterialApp CupertinoApp Theme / AnimatedTheme _InheritedTheme CupertinoTheme InheritedCupertinoTheme WidgetsApp
8. Widget と ThemeData の関係性 Theme in Flutter MaterialApp Theme / AnimatedTheme _InheritedTheme CupertinoTheme Inherited CupertinoTheme ThemeData MaterialBased CupertinoThemeData CupertinoThemeData
9. Widget と ThemeData の関係性 Theme in Flutter CupertinoApp CupertinoTheme InheritedCupertinoTheme CupertinoThemeData CupertinoBased MaterialThemeData
10. MaterialApp に適用できる ThemeData Theme in Flutter
11. CupertinoApp に適用できる ThemeData Theme in Flutter
12. MaterialApp に設定できる themeAnimationStyle Theme in Flutter
13. MaterialApp に設定できる themeAnimationStyle Theme in Flutter
14. MaterialApp の themeAnimationStyle Theme in Flutter
15. MaterialApp の themeAnimationStyle Theme in Flutter
16. MaterialApp の themeAnimationStyle CupertinoApp 内部では AnimatedTheme が 使われないため自分で追加する必要がある。 CupertinoApp を使う際の注意ポイント Theme in Flutter
17. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Flutter & Material Desgin
18. Material Design で定義されている スタイル Flutter & Material Design https://m3.material.io/styles
19. ThemeData で管理できるスタイル Flutter & Material Design
20. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Theme Management
21. Widget に渡されるスタイル 直近の祖先の Theme 系 Widget で 設定されるスタイル App 系 Widget に 設定されるスタイル スタイル反映の優先度 全部 Widget に設定していけばいいや！ ThemeData Theme Management
22. テーマ管理の 要望や課題 ThemeData Theme Management
23. ThemeData Theme Management
24. ThemeData で管理できるスタイル ThemeData Theme Management
25. 色のスタイル テキストのスタイル アイコンのスタイル Color Typography Iconography ActionChip を例に ThemeData Theme Management
26. ActionChip の背景色を変えたい ThemeData Theme Management
27. ActionChip の背景色を変えたい ThemeData Theme Management
28. ActionChip の背景色を変えたい ThemeData Theme Management
29. 例外的なコンポーネントだったらいいが... ThemeData Theme Management
30. アプリケーション全体に適用したい ThemeData Theme Management
31. アプリケーション全体に適用したい Widget への backgroundColor 指定はなし ThemeData Theme Management
32. ある画面、Widget 配下に適用したい ThemeData Theme Management
33. ある画面、Widget 配下に適用したい Theme.of は直近の祖先にある Theme が持つ ThemeData しか取得できないので注意。 ThemeData Theme Management
34. ある画面、Widget 配下に適用したい ThemeData Theme Management Theme での wrap なし Theme での wrap あり
35. 別のスタイルの ActionChip もある Widget ごとに Theme で wrap する..？ テーマに合わせたカスタム Widget 用意する..？ ThemeData Theme Management
36. ほかのコンポーネントと雰囲気をそ ろえたい ThemeData Theme Management
37. ほかのコンポーネントと雰囲気をそ ろえたい ThemeData Theme Management
38. Widget に設定あり Widget の backgroundColor Y flat か N ThemeData#colorScheme #surfaceContainerLow N 直近の親の ChipTheme が color を設定されているか Y 直近の親の ChipTheme の color Y Chip が内部で持つ Material の color N Material の中で また分岐が... ほかのコンポーネントと雰囲気をそ ろえたい 実装追って行くの大変すぎ... ThemeData Theme Management
39. ほかのコンポーネントと雰囲気をそろ えたい ThemeData Theme Management https://m3.material.io/components/chips/specs
40. ほかのコンポーネントと雰囲気をそろ えたい ActionChip なんてもんはない ThemeData Theme Management https://m3.material.io/components/chips/specs
41. ほかのコンポーネントと雰囲気をそろえたい ThemeData Theme Management https://api.flutter.dev/flutter/material/ActionChip-class.html https://m3.material.io/components/chips/overview
42. ほかのコンポーネントと雰囲気をそ ろえたい ThemeData Theme Management https://rydmike.com/flexcolorscheme/themesplayground-latest/ ボクは挫折しました。
43. cons pros ThemeData Theme Management
44. InheritedWidget Theme Management
45. テーマにまつわる Widget の関係性 InheritedWidget Theme Management MaterialApp CupertinoApp Theme / AnimatedTheme _InheritedTheme CupertinoTheme InheritedCupertinoTheme WidgetsApp
46. _InheritedTheme はどうなっているか InheritedWidget Theme Management
47. _InheritedTheme はどうなっているか InheritedWidget Theme Management 同じような仕組みを作っちゃえばよさそう？
48. カスタム Theme を作ってみる InheritedWidget Theme Management
49. カスタム Theme を作ってみる InheritedWidget Theme Management
50. カスタム Theme を作ってみる InheritedWidget Theme Management
51. カスタム Theme を作ってみる InheritedWidget Theme Management
52. PrimaryActionChip SecondaryActionChip カスタム Theme を作ってみる InheritedWidget でなくても 状態管理 package とかでも代替可能。 InheritedWidget Theme Management
53. cons pros InheritedWidget Theme Management
54. ThemeExtension Theme Management
55. ThemeData で管理できるスタイル ThemeExtension Theme Management
56. ThemeExtension の中身 ThemeExtension Theme Management
57. ThemeExtension を使ってみる ThemeExtension Theme Management
58. ThemeExtension を使ってみる ThemeExtension Theme Management
59. ThemeExtension を使ってみる ThemeExtension Theme Management
60. ThemeExtension を使ってみる ThemeExtension Theme Management
61. ThemeExtension を使ってみる ThemeExtension Theme Management
62. ThemeExtension を使ってみる ThemeExtension Theme Management
63. ThemeExtension を使ってみる ThemeExtension Theme Management https://pub.dev/packages/theme_tailor
64. ThemeExtension を使ってみる ThemeExtension Theme Management
65. ThemeExtension を使ってみる ThemeExtension Theme Management https://pub.dev/packages/thema
66. ThemeExtension Theme Management
67. thema ThemeExtension Theme Management https://github.com/ronnnnn/thema
68. cons pros ThemeExtension Theme Management
69. アプローチの比較 (主観です) Theme Management ThemeData InheritedWidget ThemeExtension 導入しやすさ 中央集権的な管理 スタイル定義の柔軟性 Material Design との親和性 運用しやすさ
70. 結局どれがいい？ Theme Management
71. 関わってるプロダクトの例 AppTheme AppColor AppText AppRadius AppColorPalette Color TextStyle Theme Management
72. 関わってるプロダクトの例 Theme Management
73. 関わってるプロダクトの例 Theme Management
74. 関わってるプロダクトの例 Theme Management
75. 関わってるプロダクトの例 Theme Management
76. 関わってるプロダクトの例 Theme Management
77. 関わってるプロダクトの例 Theme Management
78. 関わってるプロダクトの例 Theme Management
79. 関わってるプロダクトの例 Theme Management
80. package にまかせる Theme Management
81. mix Theme Management https://www.fluttermix.com/
82. shadcn_ui Theme Management https://flutter-shadcn-ui.mariuti.com/
83. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット blankcanvas
84. blankcanvas とは blankcanvas https://flutter.dev/go/blankcanvas
85. 最近の動向 blankcanvas https://github.com/flutter/flutter/issues/53059
86. Thank you.