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

Atomic DesignをFlutterでやってみた

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for つっちー つっちー
December 10, 2019
Programming
1.9k
7

Atomic DesignをFlutterでやってみた

Avatar for つっちー

つっちー

December 10, 2019

Other Decks in Programming

See All in Programming
🦞OpenClaw works with AWS
Avatar for matsukada licux
1
190
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
190
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
3
280
ハーネスエンジニアリングとは？
Avatar for kinopee kinopeee
12
5.9k
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
800
How We Benchmarked Quarkus: Patterns and anti-patterns
Avatar for Holly Cummins hollycummins
1
150
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
780
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
840
JAWS-UG横浜 #100 祝・第100回スペシャル AWS は VPC レスの時代へ
Avatar for maroon1st maroon1st
0
160
(Re)make Regexp in Ruby: Democratizing internals for the JIT
Avatar for TSUYUSATO Kitsune makenowjust
2
540
Making the RBS Parser Faster
Avatar for Soutaro Matsumoto soutaro
0
480
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
630

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
320
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
290
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
270
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
HDC tutorial
Avatar for Michiel Stock michielstock
2
630
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
140
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
970
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
580
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k

Transcript

  1. ATOMIC DESIGN Λ FLUTTER Ͱ ΍ͬͯΈͨ

  2. ࣗݾ঺հ ϓϩϑΟʔϧ ͭͬͪʔ FlutterͰͭͬͨ͘ओͳΞϓϦ ‣ ֶੜ޲ׂ͚࣌ؒ؅ཧΞϓϦ ʮͭ͹͘Δʯ ‣ ςχεΠϕϯτˍۭ͖ίʔτݕࡧΞϓϦ ʮςχεϕΞʯ

    ‣ ࣾձਓ2೥໨ ‣ גࣜձࣾhirundo CEO

  3. ATOMIC DESIGN ATOMIC DESIGN Page (ը໘) Organism(૊৫ମ) Molecule(෼ࢠ) Atom(ݪࢠ) ‣

    Widgetͷ੾Γ෼͚ํͷҰͭ ‣ WidgetΛ࠶ར༻͠΍͘͢࡞ΕΔ

  4. BLOC BLOCͷઃܭ ‣ GLOBAL BLOC ‣ ೝূॲཧͳͲ ‣ UI BLOC

    ‣ UIͷঢ়ଶΛอ࣋͢Δ PAGE ORGANISMS MOLECULES ATOMS GLOBAL BLOC UI BLOC UI BLOC AtomsͱMolecules͸UI BLoCʹґଘ͞ ͤͳ͍Α͏ʹ͢Δ

  5. ISSUE ͳͥ͜ͷઃܭʁ ‣ Atoms, Molecules͕UI BLoCґଘ͢ΔͱɺଞͷUIͰѻ͍ ͮΒ͍ͷͰBLoCʹґଘͤͨ͘͞ͳ͍ ‣ Organisms͸ػೳ͝ͱऔΓճ͍ͨ͠ ‣

    ͓ؾʹೖΓ ‣ ભҠઌ PAGE ORGANISMS MOLECULES ATOMS GLOBA L UI BLOC UI BLOC

  6. ISSUE Ͱ΋໰୊΋͋Δ ‣ ఻ൖ໰୊ ‣ UI BLoCͩͱProvider ͷྑ͕͞׆͔͖͠Εͳ ͍ ‣

    ؅ཧ͕େม ‣ ଞͷUIݻ༗ͷઃఆ͕Ͳ ΜͲΜೖͬͯ͘Δ PAGE ORGANISMS MOLECULES ATOMS GLOBAL BLOC UI BLOC UI BLOC

  7. SOLUTION ղܾࡦ ࠶ར༻ΛఘΊΔ

  8. SOLUTION ͭ·Γ... ‣ Flutterͷྑ͍ͱ͜Ζ͸UI͕؆୯ʹૉૣ࣮͘૷Ͱ͖Δ͜ͱ ‣ ߴ౓ʹந৅Խ͞Εͨ΋ͷΑΓ୯७Ͱ৑௕ͳํ͕Α͍ ‣ ׬શʹ࠶ར༻͠ͳ͍ͱ͍͏͜ͱͰ͸ͳ͘ɺOrganismsϨϕ ϧͰ͸࠶ར༻Ͱ͖ΔΑ͏ʹͭͬͯ͘΋͍͍͔΋

  9. SOLUTION ·ͱΊ ‣ Atomic Design͸WidgetΛ͖Ε͍ʹ੔ཧͰ͖Δ ‣ ݪີʹ࠶ར༻ੑΛ֬อ͠Α͏ͱ͢ΔͱFlutterͷྑ͞Λࣦ͏