Flutter : declarative UI

Flutter의 UI 개념

Introduction to declarative UI

declarative UI 라고 소개하는 내용을 보자.

앱 화면을 왼쪽에서 오른쪽처럼 구성을 변경할 때

ViewB 의 인스턴스 b 의 배경색 값을 변경하고, 자식 인스턴스 인 c1, c2 를 삭제한 후 c3 를 새로 만들면 된다.

위 동작은 보통 아래와 같은 코드 형식을 가질 것 이다.

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

Flutter 는 각각의 구성요소가 위젯이다.

Flutter 는 위젯을 변경해야 하는 상황이 생길때 기존의 것을 변경하는 것이 아니라 지우고 새로 다시 만든다.

위 그림처럼 변경하면 기존의 c1, c2 를 가지는 ViewB b 를 는 없어지고, c3 를 가지는 ViewB b 를 새로 생성하고 다시 그리는 것이다.

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

따라서 앱의 각 화면들의 구성만 만들면 UI 의 변경사항들은 Flutter Framework 가 알아서 처리해 주는 것이다.

 

The framework manages many of the responsibilities of a traditional UI object (such as maintaining the state of the layout) behind the scenes with RenderObjects. RenderObjects persist between frames and Flutter’s lightweight Widgets tell the framework to mutate the RenderObjects between states. The Flutter framework handles the rest.

 

아무 데이터도 보존할 필요가 없어서 새로 만들어져도 상관없는 StatelessWidget 과 달리, widget 내부에 값을 가지고 있는 StatefulWidget 의 경우에는 새로 만들어지면 어떻게 되는가?

이때는 framework 가 새로운 위젯에서 이전 위젯의 값을 다시 복원해 주는 식으로 동작한다.

 

The important difference between stateless and stateful widgets is that StatefulWidgets have a State object that stores state data and carries it over across tree rebuilds, so it’s not lost.