Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
FlutterとMaterialYouの対応状況について
Search
ryo
November 10, 2021
Technology
160
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
FlutterとMaterialYouの対応状況について
https://yuruhachi-it.connpass.com/event/227859/
ryo
November 10, 2021
Transcript
21 slides
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Ҏ্αϙʔτ͞ΕΔ༧ఆͷͨΊɺ͙͢ʹରԠ͢ Δඞཁͳ͍ • σβΠϯγεςϜͷ͓ӄͰָ͕ग़དྷ͍ͯΔͷͰɺରԠ͍͖ͯ͠ ͍ͨؾ࣋ͪ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
More Decks by ryo
See All by ryo
Firebase Test Labを紹介
kawa1214
0
190
【Flutter】Themeを活用して 統一感のあるデザインにする
kawa1214
0
210
Other Decks in Technology
See All in Technology
AI時代における医療情報システムのセキュリティ / Security of Healthcare IT Systems in the AI Era
henryofficial
0
160
Ebitengine製iOSアプリ公開ボタンを押す会
eiei114
0
120
Frontier Teams — Amazon は AI で「開発のやり方」をどう変えたのか
kmotohas
0
220
Context != Context: One window, many lifecycles (AI Native DevCon, Nov 2026)
birgitta410
0
120
Gifu WordPress Meetup #200 に向けて、私たちには何ができるだろうか?/ 2026-11-07 Gifu WordPress Meetup
torounit
0
280
複数システムが同居した 15 年物の AWS アカウントを解体するための考古学
wa6sn
3
140
AI対話型分析を作成し、リリースするまでの話 / The Road to Release: Buiding AI Conversational Analytics
yappli_developers
0
100
Biohub - Cell Tracking During Development 5th place solution
rist
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
17
120k
狙われているAPIの脆弱性!今こそ手をつけるべき根本的な対策とは?
nagix
0
130
高品質と高スピードを支える品質のシフトレフトのアプローチ
goyoki
2
780
並列度を下げたら速くなった — go build の重複コンパイルを実測で見る
tomoaki25
2
1.2k
Featured
See All Featured
Writing Fast Ruby
sferik
630
63k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Paper Plane
katiecoart
PRO
6
55k
Code Review Best Practice
trishagee
74
20k
What's in a price? How to price your products and services
michaelherold
247
13k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
2
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
How to Talk to Developers About Accessibility
jct
2
620
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
60k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Accessibility Awareness
sabderemane
1
300