Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FlutterとMaterialYouの対応状況について
Search
ryo
November 10, 2021
Technology
0
97
FlutterとMaterialYouの対応状況について
https://yuruhachi-it.connpass.com/event/227859/
ryo
November 10, 2021
Tweet
Share
More Decks by ryo
See All by ryo
Firebase Test Labを紹介
kawa1214
0
150
【Flutter】Themeを活用して 統一感のあるデザインにする
kawa1214
0
180
Other Decks in Technology
See All in Technology
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
Building a cloud native business on open source
lizrice
0
180
Observability — Extending Into Incident Response
nari_ex
1
280
Wasmの気になる最新情報
askua
0
190
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
様々なファイルシステム
sat
PRO
0
240
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
230
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Documentation Writing (for coders)
carmenintech
75
5.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A better future with KSS
kneath
239
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
What's in a price? How to price your products and services
michaelherold
246
12k
A designer walks into a library…
pauljervisheath
209
24k
A Tale of Four Properties
chriscoyier
161
23k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Faster Mobile Websites
deanohume
310
31k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Transcript
Material Youͱ FlutterͷରԠঢ়گʹ͍ͭͯ
FlutterͱϚςϦΞϧσβΠϯ • FlutterΛ͍ͬͯΔͱMaterial͕ࢁͰͯ͘Δ →ϚςϦΞϧσβΠϯʹೖ • Material You͕ग़ͨ
→Կͱͳͦ͘͠͏ɾɾɾ
ௐͯΈ·ͨ͠ʂ
ϚςϦΞϧσβΠϯ • ༷ʑͳϓϥοτϑΥʔϜσόΠεͰߴ࣭ͷମݧΛߏங͢Δ ͨΊͷࢧԉΛ͢ΔσβΠϯγεςϜ
σβΠϯγεςϜͱʁ • σβΠϯͷݪଇ֓೦ͷϧʔϧ ҙࢥܾఆΛखॿ͚͠ɺϢʔβʹྑ͍ମݧΛ͑Δ Typography / Color /
Navigation …
Material You • ύʔιφϥΠζ͞ΕͨUI • ؙΈΛଳͼͨ֯ • ΞμϓςΟϒσβΠϯ ͳͲ…
DynamicColor นࢴͷબʹ߹Θͤͯ৭ΛੜʢAndroid 12Ҏ্ͷΈʣ
ColorSystemͷҧ͍ Material Design 2 Material You
Material Design 2 ColorSystem • PrimarySecondary ͷಛͱͳΔ৭ എܠɺද໘ɺΤϥʔ
Material Design 3 ColorSystem .1 • Primary FAB,ཱͨͤΔϘλϯɺΞΫςΟϒͳঢ়ଶɺӨ(ߴ͞) Secondary
ϑΟϧλʔTipͳͲͷ͋·Γཱͨͳ͍ཁૉ
Material Design 3 ColorSystem .2 • Teriary Primary,Secondryͷόϥϯε ೖྗϑΟʔϧυͳͲʹ༻͍ΒΕΔ
Typographyͷҧ͍ Material Design 2 Material You
Typographyͷҧ͍ Material You
Component - AppBar Material Design 2 Material You
Component - NavigationBar Material Design 2 Material You
Component - Ϙλϯ Material Design 2 Material You
Component - Chips Material Design 2 Material You
FlutterͷରԠํ(ఆ) • Material Youͷಋೖํݕ౼த • Material 2(1Ҏ্αϙʔτ͞ΕΔ)
• ৄ͘͠ʂhttps://github.com/ fl utter/ fl utter/projects/211
෦తʹରԠ͞Ε͍ͯΔ NavigationBarΛհ
͓ΘΓʹ • Flutterʹ͓͚ΔϦϦʔε༧ఆܾ·͍ͬͯͳ͍͕αϙʔτ ͞ΕΔ • Material21Ҏ্αϙʔτ͞ΕΔ༧ఆͷͨΊɺ͙͢ʹରԠ͢ Δඞཁͳ͍ • σβΠϯγεςϜͷ͓ӄͰָ͕ग़དྷ͍ͯΔͷͰɺରԠ͍͖ͯ͠ ͍ͨؾ࣋ͪ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ