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の構造）に関して解説しています。

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
   

   View Slide

2. ࣗݾ঺հ
   • ΅ͨ΋ͪ
   
   
   • Twitter: @bot6rice
   
   
   • ຊۀ
   
   
   • αʔόʔαΠυΤϯδχΞ
   
   
   • Python / Go / AWS …
   
   
   • Flutter
   
   
   • ࡢ೥12݄͔ΒݸਓͰ
   
   
   • Flutter Osaka
   

   View Slide

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

   View Slide

4. 1. Recapping Google I/O
   

   View Slide

5. Building a desktop design language with Flutter
   Todd Volkert (Engineering Manager)
   
   
   https://www.youtube.com/watch?v=z6PpxO7R0gM
   

   View Slide

6. Session֓ཁ
   • ൴͕14೥લʹ։ൃͨ͠σεΫτοϓɾΞϓϦΛFlutterͰ࠶ݱ
   
   
   • SpinnerΛMaterial DesignͰ࠶ݱ͢ΔͱΤϥʔ͕ൃੜ
   
   
   • SpinnerͳͲWidgetΛࣗ࡞͠Α͏ʂʢ͜ΕΛChicago DesignͱݺͿʣ
   
   
   • Chicago DesignͷCustom LayoutΛͲ͏ίʔσΟϯά͢Δ͔Λ঺հ
   

   View Slide

7. Chicago Design App Spinner
   Session֓ཁ
   

   View Slide

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

   View Slide

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

   View Slide

10. 2. Layered Architecture
    

    View Slide

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

    View Slide

12. Layered Architecture
    Rendering
    Widget
    Material Cupertino
    dart:ui
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Material / Cupertino Layer
    Rendering
    Widget
    Material Cupertino
    dart:ui
    • Design languageͷLayer
    
    
    • Material Design ΍ Cupertino DesignΛ
    Ϣʔβʔ͕؆୯ʹίϯτϩʔϧͰ͖ΔΑ
    ͏ʹͨ͠Layer
    
    
    • Widget LayerΛݩʹ͍ͯ͠Δ
    

    View Slide

18. View Slide

19. ⚠ I/OͷηογϣϯͰ͸Layer͕ҟͳ͍ͬͯ·ͨ͠ɻ
    
    
    ಉηογϣϯͰΦεεϝ͞Ε͍ͯͨ
    
    
    ಈըͷLayerͰ঺հ͍͖ͤͯͨͩ͞·ͨ͠ɻ
    ࢀߟ: The Mahogany Staircase - Flutter’s Layered Design
    
    
    https://www.youtube.com/watch?v=dkyY9WCGMi0&t=143s
    

    View Slide

20. Widget Tree ʢ3ͭͷTreeߏ଄ʣ
    

    View Slide

21. Rendering
    Widget
    • Widget TreeΛߏ੒͢ΔLayer
    
    
    • Rendering LayerΛݩʹߏ੒͞ΕΔ
    • Layer Abstraction: ϨΠΞ΢τͷѻ͍Λந৅Խ
    
    
    • RenderObject TreeΛߏ੒͢ΔLayer
    Treeʹؔ࿈ͯ͠ਂ۷Γ͠·͢💪
    Layered Architecture
    

    View Slide

22. ݁࿦
    • Widgetʹฒߦ͢ΔܗͰ3ͭͷTree͕࡞ΒΕΔ
    
    
    • Widget Tree
    
    
    • Element Tree
    
    
    • RenderObject Tree
    
    
    • TreeͷΠϯελϯε͕࡞ΒΕΔॱ൪: Widget → Element → RenderObject
    
    
    • Widget͸ImmutableʢෆมʣͳͷͰ ը໘ͷߋ৽࣌ʹຖ౓ஔ͖׵ΘΔ
    
    
    • RenderObject͸MutableʢมߋՄʣͳͷͰՄೳͳݶΓ࠶ར༻͞ΕΔ
    

    View Slide

23. Widget Tree Element Tree RenderObject Tree
    Property৘ใ
    
    
    ʢྫ: RichTextͷtextͳͲʣ
    Widget΍RenderObjectΛ
    
    
    ؅ཧ
    αΠζ΍ϨΠΞ΢τɺ
    
    
    ඳࣸʹؔͯ͠ͷ৘ใΛ࣋ͭ
    
    
    (ྫ: Paddingͷchildͱpaddingͷ
    
    
    αΠζͳͲ)
    
    
    PublicͷAPI
    

    View Slide

24. runApp ؔ਺͔ΒԿ͕ى͖͍ͯΔ͔ݟ͍͖ͯ·͢👀
    

    View Slide

25. Widget Tree Element Tree RenderObject Tree
    Center
    
    
    (Root widget)
    Widget Treeͷrootʹ
    
    
    Center WidgetͷΠϯελϯε͕ੜ੒͞ΕΔ
    

    View Slide

26. Widget
    createElementʹΑΓElement͕ੜ੒͞ΕΔ
    

    View Slide

27. Widget Tree Element Tree RenderObject Tree
    Center
    
    
    (Root widget)
    SingleChildRender
    
    
    ObjectElement
    WidgetͷcreateElementϝιουʹΑΓ
    
    
    Element͕ੜ੒͞ΕΔ
    

    View Slide

28. Element
    createRenderObjectʹΑΓRenderObject͕ੜ੒͞ΕΔ
    

    View Slide

29. Widget
    ࡞ΒΕΔͷ͸ RenderPositionedBox
    

    View Slide

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

    View Slide

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!” ͕දࣔ✌
    

    View Slide

32. ը໘ߋ৽࣌ͷTreeͷมԽ
    runAppΛ2ճݺΜͰΈΔ🔔🔔
    

    View Slide

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

    View Slide

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ͳͷͰ
    
    
    શऔͬସ͑͞ΕΔ
    

    View Slide

35. runtimeType ͸ɺ͜͜Ͱ͸ Center ΍ RichText
    Element ΍ RenderObject͕࠶ར༻Ͱ͖Δ͔֬ೝɻ
    

    View Slide

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͸
    
    
    ࠶ར༻͞ΕΔ
    

    View Slide

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ʹ౉͞Εͯจࣈ͕มΘΔɻ
    

    View Slide

38. ͪΐͬͱ଴ͬͯԼ͍͞ʂʂ✋
    

    View Slide

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

    View Slide

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

    View Slide

41. StatefulBuilder Ͱ͢ʂʂ
    

    View Slide

42. StatefulWidgetͷਖ਼ମ
    

    View Slide

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

    View Slide

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

    View Slide

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Ͱͳ͍͜ͱΛࣔ͢ʣ
    

    View Slide

46. ͞ΒʹඇಉظॲཧͰBar͕ฦ͖ͬͯͨ
    

    View Slide

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ͷΈʂ
    

    View Slide

48. Widget Tree Element Tree RenderObject Tree
    Center
    Render
    
    
    PositionedBox
    StatefulBuilder
    
    
    (builder: return Bar)
    SingleChildRender
    
    
    ObjectElement
    Bar
    StatefulElement
    BarElement RenderBar
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. Widget Tree Element Tree RenderObject Tree
    Center
    Render
    
    
    PositionedBox
    StatefulBuilder
    SingleChildRender
    
    
    ObjectElement
    StatefulElement
    FooElement RenderFoo
    State
    
    
    builder callback
    
    
    ͞Βʹbuilder callback΋࣋ͨͤΔ
    Foo
    

    View Slide

53. Μʁ😳
    
    
    ͜ͷ࢓૊ΈͲ͔͜ͰݟͨΑ͏ͳ…
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. Widget Tree Element Tree RenderObject Tree
    Center
    Render
    
    
    PositionedBox
    StatefulWidget
    SingleChildRender
    
    
    ObjectElement
    StatefulElement
    FooElement RenderFoo
    State
    
    
    builder callback
    
    
    Foo
    StatefulWidget͸Treeͩͱ͜ͷ෦෼ʹ֘౰
    

    View Slide

59. ͳͷͰ
    
    
    StatefulWidget಺Ͱը໘ͷߋ৽͕ൃੜͯ͠΋
    
    
    Widget TreeͷऔΓସ͑͸࠷খݶʂ👏
    

    View Slide

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

    View Slide

61. ·ͱΊ
    

    View Slide

62. ·ͱΊ
    • FlutterͷLayered ArchitectureͱTreeߏ଄Λ஌ΔͱɺDesign LanguageΛࣗ
    ࡞Ͱ͖ΔΑ͏ʹͳΔ
    
    
    • Layerʹ͸ dart:ui, Rendering, Widget, Material / Cupertino ͕͋Δ
    
    
    • Treeʹ͸ Widget Tree, Element Tree, RenderObject Tree͕͋Δ
    
    
    • StatefulWidgetͷState͸Element͕؅ཧ͍ͯͨ͠
    

    View Slide

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
    

    View Slide

64. HAPPY CREATING!! 👋
    

    View Slide