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
Atomic DesignをFlutterでやってみた
Search
つっちー
December 10, 2019
Programming
7
1.7k
Atomic DesignをFlutterでやってみた
つっちー
December 10, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
7
430
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Vue.js学習の振り返り
hiro_xre
2
130
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
540
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
CSC509 Lecture 09
javiergs
PRO
0
100
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
500
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Done Done
chrislema
181
16k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Fireside Chat
paigeccino
32
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Visualization
eitanlees
144
15k
Documentation Writing (for coders)
carmenintech
65
4.4k
Transcript
ATOMIC DESIGN Λ FLUTTER Ͱ ͬͯΈͨ
ࣗݾհ ϓϩϑΟʔϧ ͭͬͪʔ FlutterͰͭͬͨ͘ओͳΞϓϦ ‣ ֶੜׂ͚࣌ؒཧΞϓϦ ʮͭ͘Δʯ ‣ ςχεΠϕϯτˍۭ͖ίʔτݕࡧΞϓϦ ʮςχεϕΞʯ
‣ ࣾձਓ2 ‣ גࣜձࣾhirundo CEO
ATOMIC DESIGN ATOMIC DESIGN Page (ը໘) Organism(৫ମ) Molecule(ࢠ) Atom(ݪࢠ) ‣
WidgetͷΓ͚ํͷҰͭ ‣ WidgetΛ࠶ར༻͘͢͠࡞ΕΔ
BLOC BLOCͷઃܭ ‣ GLOBAL BLOC ‣ ೝূॲཧͳͲ ‣ UI BLOC
‣ UIͷঢ়ଶΛอ࣋͢Δ PAGE ORGANISMS MOLECULES ATOMS GLOBAL BLOC UI BLOC UI BLOC AtomsͱMoleculesUI BLoCʹґଘ͞ ͤͳ͍Α͏ʹ͢Δ
ISSUE ͳͥ͜ͷઃܭʁ ‣ Atoms, Molecules͕UI BLoCґଘ͢ΔͱɺଞͷUIͰѻ͍ ͮΒ͍ͷͰBLoCʹґଘͤͨ͘͞ͳ͍ ‣ Organismsػೳ͝ͱऔΓճ͍ͨ͠ ‣
͓ؾʹೖΓ ‣ ભҠઌ PAGE ORGANISMS MOLECULES ATOMS GLOBA L UI BLOC UI BLOC
ISSUE Ͱ͋Δ ‣ ൖ ‣ UI BLoCͩͱProvider ͷྑ͕͞׆͔͖͠Εͳ ͍ ‣
ཧ͕େม ‣ ଞͷUIݻ༗ͷઃఆ͕Ͳ ΜͲΜೖͬͯ͘Δ PAGE ORGANISMS MOLECULES ATOMS GLOBAL BLOC UI BLOC UI BLOC
SOLUTION ղܾࡦ ࠶ར༻ΛఘΊΔ
SOLUTION ͭ·Γ... ‣ Flutterͷྑ͍ͱ͜ΖUI͕؆୯ʹૉૣ࣮͘Ͱ͖Δ͜ͱ ‣ ߴʹநԽ͞ΕͨͷΑΓ୯७Ͱͳํ͕Α͍ ‣ શʹ࠶ར༻͠ͳ͍ͱ͍͏͜ͱͰͳ͘ɺOrganismsϨϕ ϧͰ࠶ར༻Ͱ͖ΔΑ͏ʹ͍͍͔ͭͬͯ͘
SOLUTION ·ͱΊ ‣ Atomic DesignWidgetΛ͖Ε͍ʹཧͰ͖Δ ‣ ݪີʹ࠶ར༻ੑΛ֬อ͠Α͏ͱ͢ΔͱFlutterͷྑ͞Λࣦ͏