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
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Λݩʹ͍ͯ͠Δ
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!! 👋