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.9k
Atomic DesignをFlutterでやってみた
つっちー
December 10, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
190
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
750
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
940
DataformでPythonする / dataform-de-python
snhryt
0
150
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Optimizing for Happiness
mojombo
379
70k
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
45
3.5k
Building Adaptive Systems
keathley
43
2.7k
A better future with KSS
kneath
238
17k
How GitHub (no longer) Works
holman
314
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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ͷྑ͞Λࣦ͏