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
88
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
AIのAIによるAIのための出力評価と改善
chocoyama
2
560
Witchcraft for Memory
pocke
1
400
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.1k
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
Prox Industries株式会社 会社紹介資料
proxindustries
0
310
解析の定理証明実践@Lean 4
dec9ue
0
180
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
120
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
280
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
580
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
550
Featured
See All Featured
Scaling GitHub
holman
459
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Bash Introduction
62gerente
614
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
GraphQLとの向き合い方2022年版
quramy
48
14k
Visualization
eitanlees
146
16k
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Ҏ্αϙʔτ͞ΕΔ༧ఆͷͨΊɺ͙͢ʹରԠ͢ Δඞཁͳ͍ • σβΠϯγεςϜͷ͓ӄͰָ͕ग़དྷ͍ͯΔͷͰɺରԠ͍͖ͯ͠ ͍ͨؾ࣋ͪ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ