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

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

by Seiya Kokushi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Agenda

Slide 3

Slide 3 text

Slide 4

Slide 4 text

スタイルテーマコンポーネント 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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Flutter が対応しているテーマ https://m3.material.io/ Theme in Flutter https://developer.apple.com/design/human-interface-guidelines

Slide 7

Slide 7 text

テーマにまつわる Widget の関係性 Theme in Flutter MaterialApp CupertinoApp Theme / AnimatedTheme _InheritedTheme CupertinoTheme InheritedCupertinoTheme WidgetsApp

Slide 8

Slide 8 text

Widget と ThemeData の関係性 Theme in Flutter MaterialApp Theme / AnimatedTheme _InheritedTheme CupertinoTheme Inherited CupertinoTheme ThemeData MaterialBased CupertinoThemeData CupertinoThemeData

Slide 9

Slide 9 text

Widget と ThemeData の関係性 Theme in Flutter CupertinoApp CupertinoTheme InheritedCupertinoTheme CupertinoThemeData CupertinoBased MaterialThemeData

Slide 10

Slide 10 text

MaterialApp に適用できる ThemeData Theme in Flutter

Slide 11

Slide 11 text

CupertinoApp に適用できる ThemeData Theme in Flutter

Slide 12

Slide 12 text

MaterialApp に設定できる themeAnimationStyle Theme in Flutter

Slide 13

Slide 13 text

MaterialApp に設定できる themeAnimationStyle Theme in Flutter

Slide 14

Slide 14 text

MaterialApp の themeAnimationStyle Theme in Flutter

Slide 15

Slide 15 text

MaterialApp の themeAnimationStyle Theme in Flutter

Slide 16

Slide 16 text

MaterialApp の themeAnimationStyle CupertinoApp 内部では AnimatedTheme が使われないため自分で追加する必要がある。 CupertinoApp を使う際の注意ポイント Theme in Flutter

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Material Design で定義されているスタイル Flutter & Material Design https://m3.material.io/styles

Slide 19

Slide 19 text

ThemeData で管理できるスタイル Flutter & Material Design

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Widget に渡されるスタイル直近の祖先の Theme 系 Widget で設定されるスタイル App 系 Widget に設定されるスタイルスタイル反映の優先度全部 Widget に設定していけばいいや！ ThemeData Theme Management

Slide 22

Slide 22 text

テーマ管理の要望や課題 ThemeData Theme Management

Slide 23

Slide 23 text

ThemeData Theme Management

Slide 24

Slide 24 text

ThemeData で管理できるスタイル ThemeData Theme Management

Slide 25

Slide 25 text

色のスタイルテキストのスタイルアイコンのスタイル Color Typography Iconography ActionChip を例に ThemeData Theme Management

Slide 26

Slide 26 text

ActionChip の背景色を変えたい ThemeData Theme Management

Slide 27

Slide 27 text

ActionChip の背景色を変えたい ThemeData Theme Management

Slide 28

Slide 28 text

ActionChip の背景色を変えたい ThemeData Theme Management

Slide 29

Slide 29 text

例外的なコンポーネントだったらいいが... ThemeData Theme Management

Slide 30

Slide 30 text

アプリケーション全体に適用したい ThemeData Theme Management

Slide 31

Slide 31 text

アプリケーション全体に適用したい Widget への backgroundColor 指定はなし ThemeData Theme Management

Slide 32

Slide 32 text

ある画面、Widget 配下に適用したい ThemeData Theme Management

Slide 33

Slide 33 text

ある画面、Widget 配下に適用したい Theme.of は直近の祖先にある Theme が持つ ThemeData しか取得できないので注意。 ThemeData Theme Management

Slide 34

Slide 34 text

ある画面、Widget 配下に適用したい ThemeData Theme Management Theme での wrap なし Theme での wrap あり

Slide 35

Slide 35 text

別のスタイルの ActionChip もある Widget ごとに Theme で wrap する..？テーマに合わせたカスタム Widget 用意する..？ ThemeData Theme Management

Slide 36

Slide 36 text

ほかのコンポーネントと雰囲気をそろえたい ThemeData Theme Management

Slide 37

Slide 37 text

ほかのコンポーネントと雰囲気をそろえたい ThemeData Theme Management

Slide 38

Slide 38 text

Widget に設定あり Widget の backgroundColor Y flat か N ThemeData#colorScheme #surfaceContainerLow N 直近の親の ChipTheme が color を設定されているか Y 直近の親の ChipTheme の color Y Chip が内部で持つ Material の color N Material の中でまた分岐が... ほかのコンポーネントと雰囲気をそろえたい実装追って行くの大変すぎ... ThemeData Theme Management

Slide 39

Slide 39 text

ほかのコンポーネントと雰囲気をそろえたい ThemeData Theme Management https://m3.material.io/components/chips/specs

Slide 40

Slide 40 text

ほかのコンポーネントと雰囲気をそろえたい ActionChip なんてもんはない ThemeData Theme Management https://m3.material.io/components/chips/specs

Slide 41

Slide 41 text

ほかのコンポーネントと雰囲気をそろえたい ThemeData Theme Management https://api.flutter.dev/flutter/material/ActionChip-class.html https://m3.material.io/components/chips/overview

Slide 42

Slide 42 text

ほかのコンポーネントと雰囲気をそろえたい ThemeData Theme Management https://rydmike.com/flexcolorscheme/themesplayground-latest/ ボクは挫折しました。

Slide 43

Slide 43 text

cons pros ThemeData Theme Management

Slide 44

Slide 44 text

InheritedWidget Theme Management

Slide 45

Slide 45 text

テーマにまつわる Widget の関係性 InheritedWidget Theme Management MaterialApp CupertinoApp Theme / AnimatedTheme _InheritedTheme CupertinoTheme InheritedCupertinoTheme WidgetsApp

Slide 46

Slide 46 text

_InheritedTheme はどうなっているか InheritedWidget Theme Management

Slide 47

Slide 47 text

_InheritedTheme はどうなっているか InheritedWidget Theme Management 同じような仕組みを作っちゃえばよさそう？

Slide 48

Slide 48 text

カスタム Theme を作ってみる InheritedWidget Theme Management

Slide 49

Slide 49 text

カスタム Theme を作ってみる InheritedWidget Theme Management

Slide 50

Slide 50 text

カスタム Theme を作ってみる InheritedWidget Theme Management

Slide 51

Slide 51 text

カスタム Theme を作ってみる InheritedWidget Theme Management

Slide 52

Slide 52 text

PrimaryActionChip SecondaryActionChip カスタム Theme を作ってみる InheritedWidget でなくても状態管理 package とかでも代替可能。 InheritedWidget Theme Management

Slide 53

Slide 53 text

cons pros InheritedWidget Theme Management

Slide 54

Slide 54 text

ThemeExtension Theme Management

Slide 55

Slide 55 text

ThemeData で管理できるスタイル ThemeExtension Theme Management

Slide 56