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

Layered Architecture と Widget Tree (Google Extended Japan 2021 - Flutter)

Layered Architecture と Widget Tree (Google Extended Japan 2021 - Flutter)

I/O Extended Japan 2021 - Flutter に登壇したときのスライドです。

Session- Layered ArchitectureとWidget Tree
https://gdgkyoto.connpass.com/event/215611/

Flutter のLayered ArchitectureとWidget Tree (と並行するTreeの構造)に関して解説しています。

1d3fab5abb85de9abc092b72a036965b?s=128

botamochi

June 23, 2021
Tweet

Transcript

  1. Layered Architecture ͱ Widget Tree ΅ͨ΋ͪ(Twitter: @bot6rice) I/O Extended Japan

    2021 - Flutter on Jun 22, 2021 Building a desktop design language with Flutter
  2. ࣗݾ঺հ • ΅ͨ΋ͪ • Twitter: @bot6rice • ຊۀ • αʔόʔαΠυΤϯδχΞ

    • Python / Go / AWS … • Flutter • ࡢ೥12݄͔ΒݸਓͰ • Flutter Osaka
  3. I/O Extended Japan 2021 - Flutter 1. Recapping Google I/O

    - ηογϣϯͷ֓ཁ 2. Layered Architecture 3. Widget Treeʢ3ͭͷTreeߏ଄ʣ 4. StatefulWidget ͷਖ਼ମ 5. ·ͱΊ
  4. 1. Recapping Google I/O

  5. Building a desktop design language with Flutter Todd Volkert (Engineering

    Manager) https://www.youtube.com/watch?v=z6PpxO7R0gM
  6. Session֓ཁ • ൴͕14೥લʹ։ൃͨ͠σεΫτοϓɾΞϓϦΛFlutterͰ࠶ݱ • SpinnerΛMaterial DesignͰ࠶ݱ͢ΔͱΤϥʔ͕ൃੜ • SpinnerͳͲWidgetΛࣗ࡞͠Α͏ʂʢ͜ΕΛChicago DesignͱݺͿʣ •

    Chicago DesignͷCustom LayoutΛͲ͏ίʔσΟϯά͢Δ͔Λ঺հ
  7. Chicago Design App Spinner Session֓ཁ

  8. Custom Layoutʹඞཁͳ Layered Architecture ͱ 3ͭͷTreeΛཧղ͍ͯ͠ͳ͍ͱ ޙ൒͔ΒʮԿݴͬͯΔͷʁʯঢ়ଶ…😇

  9. Layered Archͱ3ͭͷTreeߏ଄Λղઆ💪

  10. 2. Layered Architecture

  11. Flutter͸͍͔ͭ͘ͷLayerʹ෼͚ͯઃܭ͞Ε͍ͯ·͢

  12. Layered Architecture Rendering Widget Material Cupertino dart:ui

  13. dart:ui Layer Rendering Widget Material Cupertino dart:ui • Flutter Framework͔ΒFlutterΤϯδϯ

    Λར༻͢ΔLayer • Canvas, RawϨϕϧͷςΩετϨϯμ ϦϯάͳͲΛѻ͏ • ͜ͷLayerͰΞϓϦΛ࣮૷͠Α͏ͱ͢Δ ͱɺεΫϦʔϯ৘ใͳͲ͔ΒϨΠΞ΢τ ͷ࠲ඪ΍഑ஔΛܭࢉ͠ͳ͍ͱ͍͚ͳ͍
  14. dart:ui Layer Rendering Widget Material Cupertino Foundation Animation Painting Gestures

    👈 ͷΑ͏ʹهࡌ͞ΕΔ͜ͱ΋ɻ ެࣜυΩϡϝϯτ https:// f lutter.dev/docs/resources/architectural-overview
  15. Rendering Layer Rendering Widget Material Cupertino dart:ui • Layout Abstraction:

    ϨΠΞ΢τΛந৅Խ͠ ͨLayer • dart:ui LayerͰ͸࠲ඪܭࢉͷͨΊͷίʔσΟ ϯά͕ඞཁ͕ͩͬͨɺ͜ͷLayerͰͦΕΛ ѻ͍ͬͯΔ • RenderObject TreeΛѻ͏Layer • RenderObjectͷcreateͱupdateͰ֤ʑϩ δοΫΛίʔσΟϯάΛ͠ͳ͍ͱ͍͚ͳ͍
  16. Widget Layer Rendering Widget Material Cupertino dart:ui • Composition Abstraction:

    Ϙλϯ΍ς ΩετͳͲͷߏ੒Λந৅Խͨ͠Layer • Widget TreeΛѻ͏Layer • ը໘Λߋ৽͍ͨ͠ͱ͖ʹ͸Widget Tree Λ৽ͨʹ࡞Ε͹͍͍ͷͰɺRendering LayerͷΑ͏ʹcreateͱupdateΛؾʹ͢ Δඞཁ͕ͳ͍
  17. Material / Cupertino Layer Rendering Widget Material Cupertino dart:ui •

    Design languageͷLayer • Material Design ΍ Cupertino DesignΛ Ϣʔβʔ͕؆୯ʹίϯτϩʔϧͰ͖ΔΑ ͏ʹͨ͠Layer • Widget LayerΛݩʹ͍ͯ͠Δ
  18. None
  19. ⚠ I/OͷηογϣϯͰ͸Layer͕ҟͳ͍ͬͯ·ͨ͠ɻ ಉηογϣϯͰΦεεϝ͞Ε͍ͯͨ ಈըͷLayerͰ঺հ͍͖ͤͯͨͩ͞·ͨ͠ɻ ࢀߟ: The Mahogany Staircase - Flutter’s

    Layered Design https://www.youtube.com/watch?v=dkyY9WCGMi0&t=143s
  20. Widget Tree ʢ3ͭͷTreeߏ଄ʣ

  21. Rendering Widget • Widget TreeΛߏ੒͢ΔLayer • Rendering LayerΛݩʹߏ੒͞ΕΔ • Layer

    Abstraction: ϨΠΞ΢τͷѻ͍Λந৅Խ • RenderObject TreeΛߏ੒͢ΔLayer Treeʹؔ࿈ͯ͠ਂ۷Γ͠·͢💪 Layered Architecture
  22. ݁࿦ • Widgetʹฒߦ͢ΔܗͰ3ͭͷTree͕࡞ΒΕΔ • Widget Tree • Element Tree •

    RenderObject Tree • TreeͷΠϯελϯε͕࡞ΒΕΔॱ൪: Widget → Element → RenderObject • Widget͸ImmutableʢෆมʣͳͷͰ ը໘ͷߋ৽࣌ʹຖ౓ஔ͖׵ΘΔ • RenderObject͸MutableʢมߋՄʣͳͷͰՄೳͳݶΓ࠶ར༻͞ΕΔ
  23. Widget Tree Element Tree RenderObject Tree Property৘ใ ʢྫ: RichTextͷtextͳͲʣ Widget΍RenderObjectΛ

    ؅ཧ αΠζ΍ϨΠΞ΢τɺ ඳࣸʹؔͯ͠ͷ৘ใΛ࣋ͭ (ྫ: Paddingͷchildͱpaddingͷ αΠζͳͲ) PublicͷAPI
  24. runApp ؔ਺͔ΒԿ͕ى͖͍ͯΔ͔ݟ͍͖ͯ·͢👀

  25. Widget Tree Element Tree RenderObject Tree Center (Root widget) Widget

    Treeͷrootʹ Center WidgetͷΠϯελϯε͕ੜ੒͞ΕΔ
  26. Widget createElementʹΑΓElement͕ੜ੒͞ΕΔ

  27. Widget Tree Element Tree RenderObject Tree Center (Root widget) SingleChildRender

    ObjectElement WidgetͷcreateElementϝιουʹΑΓ Element͕ੜ੒͞ΕΔ
  28. Element createRenderObjectʹΑΓRenderObject͕ੜ੒͞ΕΔ

  29. Widget ࡞ΒΕΔͷ͸ RenderPositionedBox

  30. Widget Tree Element Tree RenderObject Tree Center (Root widget) Render

    PositionedBox SingleChildRender ObjectElement Element͔Βwidget.createRenderObject͕ ݺ͹Εੜ੒͞ΕΔ
  31. Widget Tree Element Tree RenderObject Tree Center (Root widget) Render

    PositionedBox RichText MultiChild RenderObject Element RenderParagraph (Text: Hello World!) SingleChildRender ObjectElement ࢠʹରͯ͠΋ಉ༷ʹ Widget → Element → RenderObject͕ ࡞ΒΕͯ “Hello World!” ͕දࣔ✌
  32. ը໘ߋ৽࣌ͷTreeͷมԽ runAppΛ2ճݺΜͰΈΔ🔔🔔

  33. ͜ͷ࣌Flutter͸TreeͷΠϯελϯεΛͰ͖ΔݶΓ ࠶ར༻͠Α͏ͱ͢Δɻ

  34. Widget Tree Element Tree RenderObject Tree Center (Root widget) Render

    PositionedBox RichText MultiChild RenderObject Element RenderParagraph (Text: Hello World!) SingleChildRender ObjectElement Center (Root widget) RichText NEW Widget͸ImmutableͳͷͰ શऔͬସ͑͞ΕΔ
  35. runtimeType ͸ɺ͜͜Ͱ͸ Center ΍ RichText Element ΍ RenderObject͕࠶ར༻Ͱ͖Δ͔֬ೝɻ

  36. Widget Tree Element Tree RenderObject Tree Center (Root widget) Render

    PositionedBox RichText MultiChild RenderObject Element RenderParagraph (Text: Hello World!) SingleChildRender ObjectElement canUpdate͸ trueͳͷͰ Elementͱ RenderObject͸ ࠶ར༻͞ΕΔ
  37. Widget Tree Element Tree RenderObject Tree Center (Root widget) Render

    PositionedBox RichText MultiChild RenderObject Element RenderParagraph (Text: Hello Flutter!) SingleChildRender ObjectElement updateRenderObject͕ݺ͹Εͯը໘͕ߋ৽͞ΕΔɻ RichTextͷtext͕RenderObjectʹ౉͞Εͯจࣈ͕มΘΔɻ
  38. ͪΐͬͱ଴ͬͯԼ͍͞ʂʂ✋

  39. ԿઍɺԿສͱWidget͕͋ͬͨͱ͖ʹ 1ݸͷWidgetͷมԽͷͨΊ͚ͩʹ Widget Tree͕શऔͬସ͑͞ΕΔͷͬͯඇޮ཰͡Όͳ͍ʁ🤔

  40. ͦ͜Ͱ༻ҙ͞Ε͍ͯΔͷ͕ͪ͜Βʂ

  41. StatefulBuilder Ͱ͢ʂʂ

  42. StatefulWidgetͷਖ਼ମ

  43. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    (builder: return Foo) SingleChildRender ObjectElement Foo StatefulElement
  44. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    (builder: return Foo) SingleChildRender ObjectElement Foo StatefulElement StatefulBuilder ͸ ɾchildΛ࣋ͨͳ͍ʢ࣋ͭͷ͸builder callbackؔ਺ͷฦΓ஋ʹΑΓٙࣅతʹchildΛ࣋ͭʣ ɾRenderObjectΛ࣋ͨͳ͍
  45. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    (builder: return Foo) SingleChildRender ObjectElement Foo StatefulBuilder FooElement RenderFoo ඇಉظॲཧͰStatefulBuilder͔ΒFoo͕ฦ͞ΕΔͱ Widget → Element → RenderObject ͕ੜ੒͞ΕΔɻ ʢ࿷ۂͨ͠໼ҹ͸ݫີͳchildͰͳ͍͜ͱΛࣔ͢ʣ
  46. ͞ΒʹඇಉظॲཧͰBar͕ฦ͖ͬͯͨ

  47. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    (builder: return Bar) SingleChildRender ObjectElement Foo StatefulElement FooElement RenderFoo Bar ஔ͖׵ΘΔWidget͸FooͱͦͷChild / ChildrenͷΈʂ
  48. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    (builder: return Bar) SingleChildRender ObjectElement Bar StatefulElement BarElement RenderBar
  49. ͱ͜ΖͰɺStateʹ͢Δม਺͸Ͳ͏อ࣋͢Δ΂͖͔…🤔 builder Callbackͷ֎Ͱม਺Λએݴ͠ͳ͍ͱ͍͚ͳ͍͠ ͔ͱݴͬͯάϩʔόϧม਺ʹ࣋ͨͤΔͱεέʔϧ͠ͳ͍ͳ͊

  50. 💡 ͦ͏ͩʂ ElementʹState΋builder callback΋࣋ͨͤͯ͠·͓͏ʂ

  51. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    (builder: return Foo) SingleChildRender ObjectElement Foo StatefulBuilder FooElement RenderFoo State ElementʹStateΛ࣋ͨͤͯ…
  52. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulBuilder

    SingleChildRender ObjectElement StatefulElement FooElement RenderFoo State builder callback ͞Βʹbuilder callback΋࣋ͨͤΔ Foo
  53. Μʁ😳 ͜ͷ࢓૊ΈͲ͔͜ͰݟͨΑ͏ͳ…

  54. ͦ͏Ͱ͢ʂ StatefulWidget ͷ࢓૊Έͦͷ΋ͷͰ͢ʂ

  55. Widgetͷ createState ͰState࡞ͬͯΔ͠

  56. StateͷPropertyͱͯ͠ม਺એݴΛ͢Δ͠

  57. StateͷதͰbuild CallbackΛఆٛͯ͠Δ͠ʂ

  58. Widget Tree Element Tree RenderObject Tree Center Render PositionedBox StatefulWidget

    SingleChildRender ObjectElement StatefulElement FooElement RenderFoo State builder callback Foo StatefulWidget͸Treeͩͱ͜ͷ෦෼ʹ֘౰
  59. ͳͷͰ StatefulWidget಺Ͱը໘ͷߋ৽͕ൃੜͯ͠΋ Widget TreeͷऔΓସ͑͸࠷খݶʂ👏

  60. StatelessWidget ߟ͑ํ͸ StatefulWidget ͱಉ͡ɻ State ͕ແ͍ͷͰClass͕1ͭʹͳͬͨɻ ʢbuild Callback͸݈ࡏʣ

  61. ·ͱΊ

  62. ·ͱΊ • FlutterͷLayered ArchitectureͱTreeߏ଄Λ஌ΔͱɺDesign LanguageΛࣗ ࡞Ͱ͖ΔΑ͏ʹͳΔ • Layerʹ͸ dart:ui, Rendering,

    Widget, Material / Cupertino ͕͋Δ • Treeʹ͸ Widget Tree, Element Tree, RenderObject Tree͕͋Δ • StatefulWidgetͷState͸Element͕؅ཧ͍ͯͨ͠
  63. ΋ͬͱৄ͘͠ How Flutter renders widgets When to Use Keys The

    Mahogany Staircase Flutter’s Layered Design ࠓ೔ͷ಺༰͕ΑΓৄ͘͠ղઆ͞Ε͍ͯΔɻdart:ui Layer͔Βͷ࣮૷ͷ࿩͸Ұڵɻ https://www.youtube.com/watch?v=dkyY9WCGMi0 StatefulWidgetͷElement Tree͕ཧղͰ͖͍ͯΕ͹ɺཧղ͠΍͍͢ɻ https://www.youtube.com/watch?v=kn0EOS-ZiIc Treeͷجຊతͳղઆɻ https://www.youtube.com/watch?v=996ZgFRENMs
  64. HAPPY CREATING!! 👋