$30 off During Our Annual Pro Sale. View Details »

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

Seiya Kokushi
November 21, 2024

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 の最新動向についても解説します。

Seiya Kokushi

November 21, 2024
Tweet

More Decks by Seiya Kokushi

Other Decks in Technology

Transcript

  1. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ

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

    Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット Keywords
  3. 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
  4. テーマにまつわる Widget の関係性 Theme in Flutter MaterialApp CupertinoApp Theme /

    AnimatedTheme _InheritedTheme CupertinoTheme InheritedCupertinoTheme WidgetsApp
  5. Widget と ThemeData の関係性 Theme in Flutter MaterialApp Theme /

    AnimatedTheme _InheritedTheme CupertinoTheme Inherited CupertinoTheme ThemeData MaterialBased CupertinoThemeData CupertinoThemeData
  6. 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
  7. 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
  8. Widget に渡されるスタイル 直近の祖先の Theme 系 Widget で 設定されるスタイル App 系

    Widget に 設定されるスタイル スタイル反映の優先度 全部 Widget に設定していけばいいや! ThemeData Theme Management
  9. Widget に設定あり Widget の backgroundColor Y flat か N ThemeData#colorScheme

    #surfaceContainerLow N 直近の親の ChipTheme が color を設定されているか Y 直近の親の ChipTheme の color Y Chip が内部で持つ Material の color N Material の中で また分岐が... ほかのコンポーネントと雰囲気をそ ろえたい 実装追って行くの大変すぎ... ThemeData Theme Management
  10. テーマにまつわる Widget の関係性 InheritedWidget Theme Management MaterialApp CupertinoApp Theme /

    AnimatedTheme _InheritedTheme CupertinoTheme InheritedCupertinoTheme WidgetsApp
  11. Keywords Part 1 ことばの認識あわせ Theme in Flutter Part 2 テーマ管理のしくみ

    Flutter & Material Design Part 3 Flutter と Material Design の関係性 Theme Management Part 4 柔軟なテーマ管理にむけたアプローチ blankcanvas Part 5 カスタマイズ性の高いウィジェットセット blankcanvas