Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

FlutterͱϚςϦΞϧσβΠϯ • FlutterΛ࢖͍ͬͯΔͱMaterial͕୔ࢁͰͯ͘Δ 
 →ϚςϦΞϧσβΠϯʹೖ໳ 
 
 • Material You͕ग़ͨ 
 →Կͱͳ͘೉ͦ͠͏ɾɾɾ

Slide 3

Slide 3 text

ௐ΂ͯΈ·ͨ͠ʂ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ColorSystemͷҧ͍ Material Design 2 Material You

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Material Design 3 ColorSystem .1 • Primary FAB,໨ཱͨͤΔϘλϯɺΞΫςΟϒͳঢ়ଶɺӨ(ߴ͞) 
 Secondary ϑΟϧλʔTipͳͲͷ͋·Γ໨ཱͨͳ͍ཁૉ

Slide 11

Slide 11 text

Material Design 3 ColorSystem .2 • Teriary Primary,Secondryͷόϥϯε 
 ೖྗϑΟʔϧυͳͲʹ༻͍ΒΕΔ

Slide 12

Slide 12 text

Typographyͷҧ͍ Material Design 2 Material You

Slide 13

Slide 13 text

Typographyͷҧ͍ Material You

Slide 14

Slide 14 text

Component - AppBar Material Design 2 Material You

Slide 15

Slide 15 text

Component - NavigationBar Material Design 2 Material You

Slide 16

Slide 16 text

Component - Ϙλϯ Material Design 2 Material You

Slide 17

Slide 17 text

Component - Chips Material Design 2 Material You

Slide 18

Slide 18 text

FlutterͷରԠํ਑(࢑ఆ) • Material Youͷಋೖํ਑͸ݕ౼த 
 
 
 • Material 2͸(1೥Ҏ্αϙʔτ͞ΕΔ) • ৄ͘͠͸ʂhttps://github.com/ fl utter/ fl utter/projects/211

Slide 19

Slide 19 text

෦෼తʹରԠ͞Ε͍ͯΔ 
 NavigationBarΛ঺հ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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