[Flutter] Widget

1. Widget이란?

1.1 독립적으로 실행되는 작은 프로그램
  - 주로 바탕화면 등에서 날씨나 뉴스, 생활정보 등을 보여줌
  - 일반적으로 말하는 '위젯'은 그래픽이나 데이터 요소를 처리하는 함수(기능)를 가지고 있음

1.2 flutter에서의 위젯?
  - 앱의 UI를 만들고 구성하는 모든 기본 단위 요소 (이미지, 텍스트. 버튼 등 모든 것들 !!)
  - 눈에 보이지 않는 레이아웃을 정의한 모든 요소들까지 위젯 (center, column, padding 등)
  - 위젯들이 모여서 만들어진 앱 자체도 위젯

 

2. Stateless widgets vs Stateful widgets

2.1 Stateless와 Stateful의 일반적인 의미

2.1.1 state: 상태라는 의미의 명사
2.1.2 stateful: 입력되는 value 값에 의한 상호작용의 상태를 지속적으로 추적하고 보존
2.1.3 stateless: 이전 상호작용의 어떠한 값도 저장하지 않음

2.2 위젯의 종류

2.2.1 Stateless widget: 상태가 없는 정적인 위젯
  - 움직임, 변화가 없는 위젯
  - 화면 상에 존재만 할 뿐 아무것도 하지 않음
  - 어떠한 실시간 데이터도 저장하지 않음
  - 어떤 모양이나 상태를 변화시키는 value 값을 가지지 않음
  - ex) 텍스트, 이미지 등

2.2.2 Stateful widget: 상태가 있는 위젯
  - 계속 움직임이나 변화가 있는 위젯
  - 사용자의 interaction에 따라 모양이 바뀜
  - 데이터를 받게 됐을 때 모양이 바뀜
  - ex) 체크 박스, 라디오 버튼, 텍스트 필드 등

 

3. Widget tree

3.1 위젯들은 계층을 가지며, tree 구조로 표현 가능
  - 한 위젯 아래 여러 개의 child 위젯을 둘 수 있음
  - 대부분의 위젯들이 parent - child를 이루고 있음
  - Parent 위젯을 widget container라고 부르기도 함

  - MyApp: Widget tree의 최상위에 있는 위젯 (앱의 Root Widget, Custom widget이므로 이름은 달라도 됨)
  - MaterialApp: 전체 앱을 감싸고 있는 위젯, flutter SDK에 있는 코드를 사용 가능 !
  - MyHomePage: 본격적으로 앱의 디자인과 기능들이 만들어짐 (Custom widget)
  - Scaffold: 앱 화면과 기능을 구성하기 위한 빈 화면을 제공

 

(코딩셰프님의 Youtube 강의를 참고하여 작성하였습니다. --> https://www.youtube.com/@codingchef)