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

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

78ff1b5145fcd6b374a72b3fb11996db?s=47 ryo
November 10, 2021
Technology
0
25

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

https://yuruhachi-it.connpass.com/event/227859/

78ff1b5145fcd6b374a72b3fb11996db?s=128

ryo

November 10, 2021
Tweet

More Decks by ryo

See All by ryo
Firebase Test Labを紹介
78ff1b5145fcd6b374a72b3fb11996db?s=48 kawa1214
0
44
【Flutter】Themeを活用して
 統一感のあるデザインにする
78ff1b5145fcd6b374a72b3fb11996db?s=48 kawa1214
0
48

Other Decks in Technology

See All in Technology
What's Data Lake ? Azure Data Lake best practice
0d7a3b61c5c1f64a50136cf4bb5702b7?s=48 ryomaru0825
2
740
IoTLT88-NTKanazawa-laundry-dry
4256c3dc4c4b6933bb2ffb4176a595a0?s=48 yukima0707
0
210
RDRA + JavaによるレジャーSaaSプロダクトの要件定義と実装のシームレスな接続
050b8cdbe92809580ed71d0d0d327e36?s=48 jjebejj
PRO
3
520
Data in Google I/O - IO Extended GDG Seoul
3bd69093dbe39b14603242b96cfbd7c6?s=48 kennethanceyer
0
150
WACATE 2022 夏 ワークショップの目的
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
120
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.7k
miisan's career talk
253f81535853f9fddcadaec9b37dc1e0?s=48 mii3king
0
220
Custom GitHub Actions by Java
E68f2e8b47dc1769380a1fa8181df3dd?s=48 kazamori
0
280
JAWS-UG re:Habilitaion 報告 / JAWS-UG OITA rehabilitation
5acaf9241f1c2e50f3bff920050ae597?s=48 hiranofumio
0
120
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
4dd89003cc8fe9f21d67b0c99b773436?s=48 daiksy
1
430
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
50bc42471d197d0dbef7171f2ef85bb6?s=48 comucal
PRO
0
130
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
3adaa5e19f64345a0fbdb2e5d00be571?s=48 freee
0
200

Featured

See All Featured
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
46
3.9k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
265
21k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.3k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
5
2.2k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
40
61k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Designing the Hi-DPI Web
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
272
32k

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ