Flutter에서의 위젯(Widget)이란?

1. Flutter에서의 위젯(Widget)이란?  

Flutter에서 위젯은 UI를 만드는 모든 기본 단위 요소.

화면에 보이는 텍스트, 이미지뿐만 아니라 패딩, 정렬 같은 눈에 안 보이는 요소까지 모두 위젯.

Flutter의 핵심 철학은 Everything is a widget임.

전통적인 개발의 '뷰' 같은 개념이 모두 위젯으로 통일됨.

그래서 UI는 코드로만 작성하며, 스토리보드 같은 시각 도구가 따로 없음.

일반적인 위젯과의 차이점
일반적인 위젯은 바탕화면에 날씨 보여주는 작은 프로그램 말하는 거지만, Flutter 위젯은 UI를 조립하는 레고 블록 같은 역할.

 

2. 위젯의 종류: Stateless 위젯 vs. Stateful 위젯

위젯은 상태(State)를 관리하는지 여부에 따라 두 가지로 나뉨.

• Stateless 위젯 (상태가 없는 정적인 위젯)
  • Stateless 위젯은 빌드된 후에는 안 바뀌는 정적인 UI를 나타냄. 상호작용에 의한 변화를 저장 안 함.
  • 특징
    • 화면에 존재만 할 뿐, 스스로 모양을 바꾸는 값을 저장 안 함.
    • 모양이 바뀌어야 하면 새 위젯으로 갈아끼워야 함.
    • 예시: 아이콘, 텍스트, 구분선 등.
• Stateful 위젯 (상태 변화를 추적하는 동적인 위젯)
  • Stateful 위젯은 사용자가 만지거나 데이터를 받을 때 동적으로 모양이 바뀌는 UI를 나타냄.
  • State 객체를 통해 값을 계속 추적하고 보존함.
  • 특징
    • 클릭 같은 이벤트 처리가 가능함.
    • 상호작용이 있을 때 setState() 써서 화면을 갱신함.
    • 예시: 체크박스, 슬라이더, 입력 폼 등.
• 위젯 트리(Widget Tree)
  • Flutter 앱의 UI는 **나무 같은 트리 구조**로 구성됨. 이걸 위젯 트리라고 함.
  • 구조: 모든 위젯은 다른 위젯을 포함할 수 있으며, 부모 위젯과 자식 위젯 관계로 이루어짐.
  • 역할: 부모 위젯은 자식 위젯의 위치나 스타일을 결정하는 컨테이너 역할을 하기도 함.
  • 특징: 작은 위젯들을 겹겹이 쌓아서 복잡한 UI를 효율적으로 만듦.

 

이 트리 구조를 바탕으로 Flutter는 현재 상태에 맞춰 화면을 효율적으로 다시 그림.

 

위젯 트리