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

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 @kafumi__ @kafumi 🚗 2
3. FlutterKaigi 2 0 2 1 : Flutter Material You 1 . Material You Material Design 2 . Flutter Material You 3
4. FlutterKaigi 2 0 2 1 : Flutter Material You 1 . Material You Material Design 2 . Flutter Material You 4
5. 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
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 6 https://m 3 .material.io/components/buttons/specs
7. 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 🤔
8. 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)
9. FlutterKaigi 2 0 2 1 : Flutter Material You Material 2 : Material 3 : 9
10. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 10
11. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 11
12. 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
13. 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
14. 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
15. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color Scheme 15
16. FlutterKaigi 2 0 2 1 : Flutter Material You Accent Error Container , On-container Material 3 Color Scheme 16
17. 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
18. FlutterKaigi 2 0 2 1 : Flutter Material You 3 Accent Tertiary Material 3 Color Scheme 18
19. 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
20. FlutterKaigi 2 0 2 1 : Flutter Material You Surface Variant , On Surface Variant Outline Material 3 Color Scheme 20
21. 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
22. 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
23. 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 😥
24. 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
25. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme Color Scheme Key Colors Color Scheme 25
26. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme 26 5 Key Colors 
 👇
27. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme 27 Key Color 0 100 13 👇
28. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme 28 Error Key Color 
 13 👈
29. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme 29 Light Theme Color Scheme 👇
30. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme 30 : Accent Error 40 100
31. FlutterKaigi 2 0 2 1 : Flutter Material You Key Colors & Tones Color Scheme 31 : Background 99 10
32. FlutterKaigi 2 0 2 1 : Flutter Material You 32 Key Colors & Tones Color Scheme
33. FlutterKaigi 2 0 2 1 : Flutter Material You X Dark Theme Color Scheme 👇 Key Colors & Tones Color Scheme
34. FlutterKaigi 2 0 2 1 : Flutter Material You 60 & Key Color & 33 Key Colors & Tones Color Scheme
35. 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
36. 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
37. FlutterKaigi 2 0 2 1 : Flutter Material You Dynamic Color Personalization 36 : Material You: Applying dynamic color to your app and brand - YouTube
38. 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
39. FlutterKaigi 2 0 2 1 : Flutter Material You Color Scheme Personal Dynamic Color Personalization 38 : Material Design 3
40. 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
41. 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)
42. 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
43. 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
44. 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
45. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 44
46. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 45
47. 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
48. 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
49. FlutterKaigi 2 0 2 1 : Flutter Material You Type Scale Typography 48 https://m 3 .material.io/styles/typography/applying-scaling-type
50. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 49
51. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 50
52. FlutterKaigi 2 0 2 1 : Flutter Material You Component Color Scheme 2 Component 51 : Material Design 3
53. 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
54. 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
55. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 54
56. FlutterKaigi 2 0 2 1 : Flutter Material You Material 3 Color System Typography Components 55
57. FlutterKaigi 2 0 2 1 : Flutter Material You 1 . Material You Material Design 2 . Flutter Material You 56
58. FlutterKaigi 2 0 2 1 : Flutter Material You 1 . Material You Material Design 2 . Flutter Material You 57
59. FlutterKaigi 2 0 2 1 : Flutter Material You 2021 11 19 58
60. FlutterKaigi 2 0 2 1 : Flutter Material You Flutter Material 3 stable : dev/beta : Material 3 ( ) Color System Typography 59
61. 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
62. FlutterKaigi 2 0 2 1 : Flutter Material You Flutter Material 3 flutter material `import 'package:flutter/material.dart'` Material 3 (#91605) material 61
63. 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
64. 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
65. 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
66. 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
67. 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
68. 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
69. FlutterKaigi 2 0 2 1 : Flutter Material You ColorScheme 68 // ΞϓϦ͔Βͷར༻ྫ Container( / / Primary Container৭Λഎܠ৭ʹࢦఆ color: Theme.of(context).colorScheme.primaryContainer, child: ... , . .. , ); Done
70. 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
71. 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
72. 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
73. 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
74. 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
75. 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
76. 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
77. 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
78. 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
79. 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
80. 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 

81. 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
82. 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
83. FlutterKaigi 2 0 2 1 : Flutter Material You 82