Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FlutterでのMaterial You対応の状況と今後の展望 / The status and plan of Flutter's Material You support

FlutterでのMaterial You対応の状況と今後の展望 / The status and plan of Flutter's Material You support

FlutterKaigi 2021で発表した「FlutterでのMaterial You対応の状況と今後の展望」のスライド資料です。
https://fortee.jp/flutterkaigi-2021/proposal/46f30016-baa5-4d40-855e-78dab97fb2b8

Takafumi Kanda

November 29, 2021
Tweet

More Decks by Takafumi Kanda

Other Decks in Programming

Transcript

  1. Takafumi Kanda (@kafumi) FlutterKaigi 20 2 1 @ Day 1

    (Nov 29 , 2 021 ) Flutter Material You 

  2. FlutterKaigi 2 0 2 1 : Flutter Material You 1

    . Material You Material Design 2 . Flutter Material You 3
  3. FlutterKaigi 2 0 2 1 : Flutter Material You 1

    . Material You Material Design 2 . Flutter Material You 4
  4. FlutterKaigi 2 0 2 1 : Flutter Material You Google

    I/O 20 21 Material Design Color System Typography Components Personalization Material You : Material Design 3 5
  5. FlutterKaigi 2 0 2 1 : Flutter Material You Android

    Dev Summit 20 2 1 
 https://m 3 .material.io/ Material Design 3 : Material 3 , M 3 Material You Material You 6 https://m 3 .material.io/components/buttons/specs
  6. FlutterKaigi 2 0 2 1 : Flutter Material You Android

    Dev Summit 20 2 1 
 https://m 3 .material.io/ Material Design 3 : Material 3 , M 3 Material You Material You 7 https://m 3 .material.io/components/buttons/specs Material 3 … ? 
 2 🤔
  7. FlutterKaigi 2 0 2 1 : Flutter Material You Google

    I/O 20 18 M 1 M 2 M 2 Material Theming Material Design 2 8 Material Theming (Designing a Material Theme: Color - Material Design)
  8. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 10
  9. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 11
  10. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Color Scheme Key Colors & Tones Color Scheme Dynamic Color Personalization Elevation Overlay Typography Components 12
  11. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Color Scheme Key Colors & Tones Color Scheme Dynamic Color Personalization Elevation Overlay Typography Components 13
  12. FlutterKaigi 2 0 2 1 : Flutter Material You Primary,

    On Primary Secondary, On Secondary Error, On Error Background, On Background Surface, On Surface Primary variant, Secondary variant Material 2 Color Scheme 14
  13. FlutterKaigi 2 0 2 1 : Flutter Material You Accent

    Error Container , On-container Material 3 Color Scheme 16
  14. FlutterKaigi 2 0 2 1 : Flutter Material You Container

    Accent Material 3 Color Scheme 17 1 . On Primary 2 . Primary 3 . On Primary 
 container 4 . Primary 
 container : Color system Material Design 3
  15. FlutterKaigi 2 0 2 1 : Flutter Material You 3

    Accent Tertiary Material 3 Color Scheme 18
  16. FlutterKaigi 2 0 2 1 : Flutter Material You Tertiary

    Time Picker 👉 Material 3 Color Scheme 19 1 . On Tertiary 
 Container 2 . Tertiary 
 Container : Color system Material Design 3
  17. FlutterKaigi 2 0 2 1 : Flutter Material You Surface

    Variant , On Surface Variant Outline Material 3 Color Scheme 20
  18. FlutterKaigi 2 0 2 1 : Flutter Material You Surface

    Variant Surface Outline Divider Surface Variant Material 3 Color Scheme 21 1 . On Surface Variant 2 . Surface Variant 3 . Surface Variant 1 . Outline : Color system Material Design 3
  19. FlutterKaigi 2 0 2 1 : Flutter Material You Tertiary,

    On Tertiary Container & On Container Surface Variant, On Surface Variant Outline Primary variant Secondary variant Material 3 Color Scheme 22
  20. FlutterKaigi 2 0 2 1 : Flutter Material You Tertiary,

    On Tertiary Container & On Container Surface Variant, On Surface Variant Outline Primary variant Secondary variant Material 3 Color Scheme 23 
 Dark 😥
  21. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Color Scheme Key Colors & Tones Color Scheme Dynamic Color Personalization Elevation Overlay Typography Components 24
  22. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme Color Scheme Key Colors Color Scheme 25
  23. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme 26 5 Key Colors 
 👇
  24. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme 27 Key Color 0 100 13 👇
  25. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme 28 Error Key Color 
 13 👈
  26. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme 29 Light Theme Color Scheme 👇
  27. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme 30 : Accent Error 40 100
  28. FlutterKaigi 2 0 2 1 : Flutter Material You Key

    Colors & Tones Color Scheme 31 : Background 99 10
  29. FlutterKaigi 2 0 2 1 : Flutter Material You 32

    Key Colors & Tones Color Scheme
  30. FlutterKaigi 2 0 2 1 : Flutter Material You X

    Dark Theme Color Scheme 👇 Key Colors & Tones Color Scheme
  31. FlutterKaigi 2 0 2 1 : Flutter Material You 60

    & Key Color & 33 Key Colors & Tones Color Scheme
  32. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Color Scheme Key Colors & Tones Color Scheme Dynamic Color Personalization Elevation Overlay Typography Components 34
  33. FlutterKaigi 2 0 2 1 : Flutter Material You Dynamic

    Color Personalization Source Color Source Color 5 Key Colors 35 : Material You: Applying dynamic color to your app and brand - YouTube
  34. FlutterKaigi 2 0 2 1 : Flutter Material You Dynamic

    Color Personalization 36 : Material You: Applying dynamic color to your app and brand - YouTube
  35. FlutterKaigi 2 0 2 1 : Flutter Material You Dynamic

    Color Personalization 37 Android 12 Key Colors Android Android : Material You: Applying dynamic color to your app and brand - YouTube
  36. FlutterKaigi 2 0 2 1 : Flutter Material You Color

    Scheme Personal Dynamic Color Personalization 38 : Material Design 3
  37. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Color Scheme Key Colors & Tones Color Scheme Dynamic Color Personalization Elevation Overlay Typography Components 39
  38. FlutterKaigi 2 0 2 1 : Flutter Material You Elevation

    Overlay Elevation Overlay: Elevation Tint Material 2 Dark Theme Elevation Overlay 40 Material 2 Elevation Overlay (Dark theme - Material Design)
  39. FlutterKaigi 2 0 2 1 : Flutter Material You Light

    Theme Elevation Overlay Overlay Primary (Light, Dark ) Elevation Overlay 41 Elevation 0 dp Elevation 8 dp Elevation 1 6 dp Material 2 Material 3 Material 2 Material 3 : Material Theming in Compose | Jetpack Compose | Android Developers
  40. FlutterKaigi 2 0 2 1 : Flutter Material You Light

    Theme Elevation Overlay Overlay Primary (Light, Dark ) Elevation 1 (1dp) 5 % Opacity Elevation 2 (3dp) 8 % Opacity Elevation 3 (6dp) 1 1 % Opacity Elevation Overlay 42 : Color system Material Design 3
  41. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Color Scheme Key Colors & Tones Color Scheme Dynamic Color Personalization Elevation Overlay Typography Components 43
  42. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 44
  43. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 45
  44. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    2 13 Type Scale Headline 1 - 6 Subtitle 1 - 2 Body 1 - 2 Button Caption Overline Typography 46 : The type system - Material Design
  45. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 5 × 3 = 15 Type Scale Display Headline Title Label Body Typography 47 : Typography Material Design 3
  46. FlutterKaigi 2 0 2 1 : Flutter Material You Type

    Scale Typography 48 https://m 3 .material.io/styles/typography/applying-scaling-type
  47. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 49
  48. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 50
  49. FlutterKaigi 2 0 2 1 : Flutter Material You Component

    Color Scheme 2 Component 51 : Material Design 3
  50. FlutterKaigi 2 0 2 1 : Flutter Material You Buttons

    Filled Tonal ALL CAPS Sentence case Fully rounded 52 Material 2 Material 3 Text Outlined Elevated Tonal Filled Contained Outlined Text : Common buttons Material Design 3
  51. FlutterKaigi 2 0 2 1 : Flutter Material You Floating

    Action Buttons (FAB) Primary Primary Container or Surface Large 53 FAB Small FAB Large FAB Material 2 Material 3 : FAB Material Design 3
  52. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 54
  53. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System Typography Components 55
  54. FlutterKaigi 2 0 2 1 : Flutter Material You 1

    . Material You Material Design 2 . Flutter Material You 56
  55. FlutterKaigi 2 0 2 1 : Flutter Material You 1

    . Material You Material Design 2 . Flutter Material You 57
  56. FlutterKaigi 2 0 2 1 : Flutter Material You Flutter

    Material 3 stable : dev/beta : Material 3 ( ) Color System Typography 59
  57. FlutterKaigi 2 0 2 1 : Flutter Material You stable

    FAB Large (#86411, v 2 . 5 . 0 ) 60 Content App Bar (#79999, v 2 . 3 . 0 ) : Pull Request # 86441 · fl utter/ fl utter : Pull Request # 79999 · fl utter/ fl utter
  58. FlutterKaigi 2 0 2 1 : Flutter Material You Flutter

    Material 3 flutter material `import 'package:flutter/material.dart'` Material 3 (#91605) material 61
  59. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 62 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  60. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 63 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  61. FlutterKaigi 2 0 2 1 : Flutter Material You ThemeData

    Material 3 Opt-in ThemeData Material 3 Opt-in useMaterial3 false true Material 3 Material 3 Pull Request # 93 4 3 4 master 64 Done
  62. FlutterKaigi 2 0 2 1 : Flutter Material You ThemeData

    Material 3 Opt-in 65 // ΞϓϦ͔Βͷར༻ྫ MaterialApp( theme: ThemeData( useMaterial3: true, // <- Material 3ΛOpt-in colorScheme: . .. , textTheme: ... , ... , ), . .. , ); Done
  63. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 66 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  64. FlutterKaigi 2 0 2 1 : Flutter Material You ColorScheme

    ColorScheme Material 3 Color Scheme Tertiary Container variants primaryVariant secondaryVariant Pull Request # 93 4 2 7 master 67 Done
  65. FlutterKaigi 2 0 2 1 : Flutter Material You ColorScheme

    68 // ΞϓϦ͔Βͷར༻ྫ Container( / / Primary Container৭Λഎܠ৭ʹࢦఆ color: Theme.of(context).colorScheme.primaryContainer, child: ... , . .. , ); Done
  66. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 69 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  67. FlutterKaigi 2 0 2 1 : Flutter Material You TextTheme

    TextTheme Material 3 Text Style displayLarge displayMedium displaySmall … bodySmall 70 Work in Progress : Typography Material Design 3
  68. FlutterKaigi 2 0 2 1 : Flutter Material You TextTheme

    Material 2 Text Style Material 3 Text Style Material 2 Text Style dart fix Material 3 Text Style Pull Request # 93 7 2 5 71 Material 2 Material 2 headline1 headline2 headline3 headline4 headline5 headline6 subtitle1 subtitle2 bodyText1 bodyText2 caption button overline Material 3 displayLarge displayMedium displaySmall headlineMedium headlineSmall titleLarge titleMedium titleSmall bodyLarge bodyMedium bodySmall labelLarge labelSmall Work in Progress
  69. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 72 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  70. FlutterKaigi 2 0 2 1 : Flutter Material You Elevation

    Overlay Material 3 Opt-in true Elevation Overlay Light Primary Tint Issue # 91 6 07 73 To Do : Color system Material Design 3
  71. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 74 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  72. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Opt-in true ⾒ Material 3 Color Shape Text Style Widget Widget 75 Work in Progress : Material Design 3
  73. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 76 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc
  74. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 77 ThemeData Material 3 Opt-in ColorScheme TextTheme Material 3 Opt-in true Material 3 Opt-in Elevation Overlay ༷ʑͳίϯϙʔωϯτͷελΠϧ ͷमਖ਼ • Button • FloatingActionButton • Card • Dialog • NavigationBar • Drawer • NavigationRail • AppBar etc Material 3
  75. FlutterKaigi 2 0 2 1 : Flutter Material You Dynamic

    Color Key Colors Color Scheme 👉 Material Theme Builder 78 : Material You: Applying dynamic color to your app and brand - YouTube
  76. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    Theme Builder Flutter Material Theme Builder: Material 3 Color Scheme Web Figma Plugin Flutter Color Scheme Dart 79 Flutter 

  77. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    3 Color System, Typography, Components Flutter Material 3 Material 3 Material 3 UI Material 3 80
  78. FlutterKaigi 2 0 2 1 : Flutter Material You Material

    Design 3 Guideline Material 3 Design Kit (Figma fi le) 81 https://www. fi gma.com/community/ fi le/ 103520 3 688 16 8 086460