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

Atomic DesignをFlutterでやってみた

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for つっちー つっちー
December 10, 2019
Programming
2k
7

Atomic DesignをFlutterでやってみた

Avatar for つっちー

つっちー

December 10, 2019

Other Decks in Programming

See All in Programming
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
Avatar for Wagyu wagyu
0
150
Webフレームワークの ベンチマークについて
Avatar for Yusuke Wada yusukebe
0
130
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
130
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.3k
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
Avatar for akio akiomatic
0
120
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
250
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
490
JavaDoc 再入門
Avatar for nagise nagise
0
280
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
270
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
210
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
Avatar for Naoki Kishida kishida
2
110
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
2.8k

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
780
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
350
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
420
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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ͷྑ͞Λࣦ͏