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

FlutterとMaterialYouの対応状況について

78ff1b5145fcd6b374a72b3fb11996db?s=47 ryo
November 10, 2021

 FlutterとMaterialYouの対応状況について

78ff1b5145fcd6b374a72b3fb11996db?s=128

ryo

November 10, 2021
Tweet

More Decks by ryo

Other Decks in Technology

Transcript

  1. Material Youͱ 
 FlutterͷରԠঢ়گʹ͍ͭͯ

  2. FlutterͱϚςϦΞϧσβΠϯ • FlutterΛ࢖͍ͬͯΔͱMaterial͕୔ࢁͰͯ͘Δ 
 →ϚςϦΞϧσβΠϯʹೖ໳ 
 
 • Material You͕ग़ͨ

    
 →Կͱͳ͘೉ͦ͠͏ɾɾɾ
  3. ௐ΂ͯΈ·ͨ͠ʂ

  4. ϚςϦΞϧσβΠϯ • ༷ʑͳϓϥοτϑΥʔϜ΍σόΠεͰߴ඼࣭ͷମݧΛߏங͢Δ ͨΊͷࢧԉΛ͢ΔσβΠϯγεςϜ

  5. σβΠϯγεςϜͱ͸ʁ • σβΠϯͷݪଇ΍֓೦ͷϧʔϧ 
 ҙࢥܾఆΛखॿ͚͠ɺϢʔβʹྑ͍ମݧΛ఻͑Δ 
 Typography / Color /

    Navigation …
  6. Material You • ύʔιφϥΠζ͞ΕͨUI • ؙΈΛଳͼͨ֯ • ΞμϓςΟϒσβΠϯ 
 ͳͲ…

  7. DynamicColor นࢴͷબ୒ʹ߹Θͤͯ৭Λੜ੒ʢAndroid 12Ҏ্ͷΈʣ

  8. ColorSystemͷҧ͍ Material Design 2 Material You

  9. Material Design 2 ColorSystem • Primary΍Secondary ੡඼ͷಛ௃ͱͳΔ৭ 
 എܠɺද໘ɺΤϥʔ

  10. Material Design 3 ColorSystem .1 • Primary FAB,໨ཱͨͤΔϘλϯɺΞΫςΟϒͳঢ়ଶɺӨ(ߴ͞) 
 Secondary

    ϑΟϧλʔTipͳͲͷ͋·Γ໨ཱͨͳ͍ཁૉ
  11. Material Design 3 ColorSystem .2 • Teriary Primary,Secondryͷόϥϯε 
 ೖྗϑΟʔϧυͳͲʹ༻͍ΒΕΔ

  12. Typographyͷҧ͍ Material Design 2 Material You

  13. Typographyͷҧ͍ Material You

  14. Component - AppBar Material Design 2 Material You

  15. Component - NavigationBar Material Design 2 Material You

  16. Component - Ϙλϯ Material Design 2 Material You

  17. Component - Chips Material Design 2 Material You

  18. FlutterͷରԠํ਑(࢑ఆ) • Material Youͷಋೖํ਑͸ݕ౼த 
 
 
 • Material 2͸(1೥Ҏ্αϙʔτ͞ΕΔ)

    • ৄ͘͠͸ʂhttps://github.com/ fl utter/ fl utter/projects/211
  19. ෦෼తʹରԠ͞Ε͍ͯΔ 
 NavigationBarΛ঺հ

  20. ͓ΘΓʹ • Flutterʹ͓͚ΔϦϦʔε༧ఆ೔͸ܾ·͍ͬͯͳ͍͕αϙʔτ͸ ͞ΕΔ • Material2΋1೥Ҏ্αϙʔτ͞ΕΔ༧ఆͷͨΊɺ͙͢ʹରԠ͢ Δඞཁ͸ͳ͍ • σβΠϯγεςϜͷ͓ӄͰָ͕ग़དྷ͍ͯΔͷͰɺରԠ͍͖ͯ͠ ͍ͨؾ࣋ͪ

  21. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ