[Flutter] Widget / Stateless Widget / Stateful Widget / Inherited Widget

Widget

Flutter 에서 위젯은 화면에 표시되는 구성 요소를 나타내는 객체이다. 안드로이드에서 뷰라고 볼 수 있다. 

 

버튼, 이미지, 텍스트, 입력 필드 등의 UI 뿐아니라 눈에 보이지 않는 요소 padding, center 등도 위젯이다.

 

(네이티브 안드로이드 뷰를 정의할 때 내부 속성값으로 margin이나 padding 등을 정의해서 뷰의 크기나 위치 등을 지정하는데

이는 그저 단순 속성값일 뿐 뷰라고 칭하지는 않는다. 단, 플러터는 다 위젯으로 존재한다.)

 

Widget은 Flutter의 구조적 요소이며, 다양한 위젯을 결합하여 앱의 디자인과 기능을 구현할 수 있다.

 

 

Stateless Widget

값이 변경되지 않는 UI 요소를 나타낸다.

예를 들어, 화면에 표시되는 텍스트, 이미지 등이 이에 해당한다.

Stateless Widget 은 화면에서 상태가 변경되지 않기 때문에 효율적으로 캐시될 수 있다.

 

 

Stateful Widget

값이 변경될 수 있는 UI 요소를 나타낸다. 예를 들어, 사용자의 입력에 따라 화면에 표시되는 텍스트, 체크박스 등이 이에 해당한다.

Stateful Widget 은 화면에서 상태가 변경되므로, 새로고침 할 수 있다.

 

결론적으로, 

 

Stateless Widget은 상태가 변경되지 않는 경우, Stateful Widget은 상태가 변경될 수 있는 경우에 사용한다.

 

 

Inherited Widget

하위 위젯에서 공유될 수 있는 정보를 제공하는 위젯이다.

일반적으로 앱의 공통 상태, 테마, 설정 등을 관리하기 위해 사용된다.

 

Inherited Widget은 공유되는 정보를 가지고 있으며, 하위 위젯에서 그 정보에 접근할 수 있는 context 객체를 제공한다.

Inherited Widget은 다중 상속을 지원하지 않으며, 앱의 공통 정보는 유일한 Inherited Widget 객체에서 관리된다.

 

 

Widget Tree

Flutter에서 위젯 트리란, Flutter UI를 구성하는 모든 위젯들의 계층 구조를 나타낸 것이다.

위젯 트리는 각 위젯이 다른 위젯의 자식 위젯이 되는 관계를 갖게 한다.

 

최상위 위젯은 앱의 루트 위젯이며, 하위 위젯들은 부모 위젯에서 상속받은 정보를 사용하거나 자체 상태를 가질 수 있다.

 

위젯 트리를 구성하면서, 각 위젯은 자신의 기능을 수행하고 하위 위젯에게 정보를 전달할 수 있다.

위젯 트리를 사용하면 Flutter UI의 레이아웃, 스타일, 상태 등을 구성하고 관리할 수 있다.