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
   

   

   View Slide

2. FlutterKaigi
   2 0
   2 1
   : Flutter Material You
   
   
   @kafumi__
   
   
   @kafumi
   
   
   🚗
   2
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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 🤔
   

   View Slide

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)
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. FlutterKaigi
    2 0
    2 1
    : Flutter Material You
    Material
    3
    Color Scheme
    15
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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 😥
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    👇
    

    View Slide

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

    View Slide

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

    13
    👈
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. FlutterKaigi
    2 0
    2 1
    : Flutter Material You
    
    
    2021 11 19
    58
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide