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
decksh - a little language for decks
ajstarks
4
21k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
510
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
910
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
NEWT Backend Evolution
xpromx
1
170
Featured
See All Featured
Scaling GitHub
holman
461
140k
Become a Pro
speakerdeck
PRO
29
5.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
Thoughts on Productivity
jonyablonski
69
4.8k
Six Lessons from altMBA
skipperchong
28
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
We Have a Design System, Now What?
morganepeng
53
7.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
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ͷྑ͞Λࣦ͏