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

【Flutter】Themeを活用して
 統一感のあるデザインにする

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ryo ryo
May 27, 2021
Programming
200
0

【Flutter】Themeを活用して
 統一感のあるデザインにする

第31回ゆるはち.it: スマホアプリ開発ついてゆるく話す
https://yuruhachi-it.connpass.com/event/212197/

Avatar for ryo

ryo

May 27, 2021

More Decks by ryo

See All by ryo
FlutterとMaterialYouの対応状況について
Avatar for ryo kawa1214
0
130
Firebase Test Labを紹介
Avatar for ryo kawa1214
0
170

Other Decks in Programming

See All in Programming
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
760
今さら聞けないCancellationToken
Avatar for tkym htkym
0
210
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
220
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
1
1.4k
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.1k
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.4k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3k
TypeSpec で繋ぐ複数プロダクトの型安全
Avatar for Mitsui maroon8021
1
270
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
260
iOS26時代の新規アプリ開発
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
6
1.2k
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
210

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.8k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
150
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
150
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
460
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
300

Transcript

  1. ʲFlutterʳThemeΛ׆༻ͯ͠ 
 ౷Ұײͷ͋ΔσβΠϯʹ͢Δ

  2. Flutter ͷಛ௃ • ΫϩεϓϥοτϑΥʔϜ • ๛෋ͳWidgetʢ൚༻ੑͷߴ͍ύʔπʣ͕ఏڙ͞Ε͓ͯΓɼ 
 ͦͷ૊Έ߹ΘͤͰUIΛ࡞Δ • ϚςϦΞϧσβΠϯ

  3. Themeͱ͸ 1 • ΞϓϦશମͰ౷ҰతͳσβΠϯΛఏڙ͢Δ࢓૊Έ μʔΫςʔϚ ΞϓϦશମͷσβΠϯมߋ ίετμ΢ϯʂʂʂ

  4. Themeͱ͸ 2 ʢWidget Treeʣ

  5. Themeͱ͸ 3

  6. ThemeΛ࢖ͬͯΈΔ1

  7. ThemeΛ࢖ͬͯΈΔ 2

  8. ThemeΛ࢖ͬͯΈΔ 3

  9. ׆༻͢Δ·Ͱͷϋʔυϧ

  10. 5IFNF%BUBͷϓϩύςΟͷ਺͕ଟ͗͢Δ😱

  11. ԿΛҙຯ͍ͯ͠Δͷ͔෼͔Βͳ͍😭 Ͳ͜ʹӨڹ͕͋Δ͔෼͔Βͳ͍😭😭

  12. υΩϡϝϯτΛΈΑ͏ʂ

  13. ݕࡧʂ https://master-api. fl utter.dev/ fl utter/material/ThemeData- class.html

  14. https://master-api. fl utter.dev/ fl utter/material/ VisualDensity-class.html Ͳ͜ʹӨڹ͕͋Δ͔෼͔Βͳ͍ 👌

  15. ԿΛҙຯ͍ͯ͠Δͷ͔෼͔Βͳ͍ 👌 https://master-api. fl utter.dev/ fl utter/material/ VisualDensity-class.html 
 https://material.io/design/layout/applying-

    density.html#usage

  16. ͋Γ͕ͱ͏͍͟͝·ͨ͠