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