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

Slide 1

Slide 1 text

Layered Architecture ͱ Widget Tree ΅ͨ΋ͪ(Twitter: @bot6rice) I/O Extended Japan 2021 - Flutter on Jun 22, 2021 Building a desktop design language with Flutter

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

1. Recapping Google I/O

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Chicago Design App Spinner Session֓ཁ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2. Layered Architecture

Slide 11

Slide 11 text

Flutter͸͍͔ͭ͘ͷLayerʹ෼͚ͯઃܭ͞Ε͍ͯ·͢

Slide 12

Slide 12 text

Layered Architecture Rendering Widget Material Cupertino dart:ui

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Widget Tree ʢ3ͭͷTreeߏ଄ʣ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

runApp ؔ਺͔ΒԿ͕ى͖͍ͯΔ͔ݟ͍͖ͯ·͢👀

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Widget createElementʹΑΓElement͕ੜ੒͞ΕΔ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Element createRenderObjectʹΑΓRenderObject͕ੜ੒͞ΕΔ

Slide 29

Slide 29 text

Widget ࡞ΒΕΔͷ͸ RenderPositionedBox

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

StatefulBuilder Ͱ͢ʂʂ

Slide 42

Slide 42 text

StatefulWidgetͷਖ਼ମ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

͞ΒʹඇಉظॲཧͰBar͕ฦ͖ͬͯͨ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

💡 ͦ͏ͩʂ ElementʹState΋builder callback΋࣋ͨͤͯ͠·͓͏ʂ

Slide 51

Slide 51 text

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Widgetͷ createState ͰState࡞ͬͯΔ͠

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

·ͱΊ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

΋ͬͱৄ͘͠ 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

Slide 64

Slide 64 text

HAPPY CREATING!! 👋