Atomic DesignをFlutterでやってみた

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