KIHYEON KWON

# How Flutter renders Widgets

A widget is an immutable description of part of a user interface

But UIs are mutable. How do flutter manage changes?

# Flutter has 3 trees

# Widget

  • Describes the configuration for an element

# Element

  • Instantiation of a widget at a particular location in the tree. Manages updating and changes.

# RenderObject

  • Handles size, layout, and painting.

# The 3 trees matches the rendering stage

# Configure

  • hold properties
  • offer API
  • widget tree

# Lifecyle

  • hold a spot in the UI hierachy
  • manage parent/child
  • element tree

# Paint

  • size and paint
  • lay out children
  • claim input events

# Widget Update

What happens when you runApp twice?

void main(){
    runApp();
    runApp();
}
1
2
3
4

image-20220217152508382

key와 type이 같다면 update할 수 있다.

즉, 재사용이 가능한 부분은 재사용한다.

위젯이 업데이트 된다.

element는 이제 updateRenderObject가 가능한지 확인한다.

image-20220217152548394

RenderObject를 업데이트 한다.

세가지 tree가 있기 때문에 업데이트가 될때마다 가능한 재활용을 할 수 있다.

← Stream →

Back to list