[Flutter]Widget? StatelessWidget, StatefulWidget

2023. 9. 24. 13:09Just do IT/Flutter

반응형

Flutter에서 widget은 화면을 구성하는 기본 요소입니다. Flutter의 모든 UI는 widget으로 구성되며, widget을 조합하여 원하는 화면을 만들 수 있습니다.

Flutter에서 제공하는 widget은 크게 다음과 같은 종류로 나눌 수 있습니다.

 

1. StatelessWidget

상태가 없는 widget입니다. 상태가 없는 widget은 생성 시점에 값이 결정되고 변경되지 않습니다.

StatelessWidget의 예로는 다음과 같은 widget이 있습니다.

  1) Text : 텍스트를 표시하는 widget
  2) Image : 이미지를 표시하는 widget
  3) Container : 단색 박스를 표시하는 widget

 

2. StatefulWidget

상태가 있는 widget입니다. 상태가 있는 widget은 생성 시점에 값이 결정되지 않고, 화면이 업데이트될 때마다 값이 변경될 수 있습니다.

StatefulWidget의 예로는 다음과 같은 widget이 있습니다.

  1) Button : 버튼을 표시하는 widget
  2) TextField : 텍스트 입력 필드를 표시하는 widget
  3) ListView : 리스트뷰를 표시하는 widget

 

3. LayoutWidget

화면을 배치하는 widget입니다. LayoutWidget은 다른 widget을 자식으로 포함하여 화면을 배치합니다.

LayoutWidget의 예로는 다음과 같은 widget이 있습니다.
  1) Scaffold : 화면의 기본 레이아웃을 제공하는 widget
  2) Row : 수평으로 widget을 배치하는 widget
  3) Column : 수직으로 widget을 배치하는 widget

 

4. RenderObjectWidget

화면을 그리는 widget입니다. RenderObjectWidget은 렌더링 객체를 사용하여 화면을 그립니다.

RenderObjectWidget의 예로는 다음과 같은 widget이 있습니다.
  1) CustomPaint : 사용자 지정 페인팅을 수행하는 widget
  2) AnimatedContainer : 애니메이션으로 크기와 모양을 변경하는 widget

 

5. MediaQueryWidget

화면의 크기와 방향을 확인하는 widget입니다. MediaQueryWidget은 화면의 크기와 방향을 확인하여 다른 widget에 전달합니다.

MediaQueryWidget의 예로는 다음과 같은 widget이 있습니다.
  1) MediaQuery.of(context) : 현재 context의 화면 크기와 방향을 확인하는 함수
  2) MediaQueryData.size : 화면의 크기를 확인하는 속성
  3) MediaQueryData.orientation : 화면의 방향을 확인하는 속성

 

Flutter에서 제공하는 widget은 매우 다양하며, 다양한 용도로 사용할 수 있습니다. Flutter의 widget을 사용하여 원하는 화면을 구현할 수 있습니다.

 

반응형

'Just do IT > Flutter' 카테고리의 다른 글

[Flutter]Widget Tree?  (0) 2023.09.24