[Flutter 개념] 01. 위젯이란 - Flutter Widget

 

 

 

 

 

🙆‍♂️Widget

---

플러터에서 위젯은 모든 UI를 만들고 구성하는 기본 단위라고 생각하시면 됩니다.

 

 

이렇게 텍스트, 이미지, 버튼 등등이 위젯으로 이루어져 있습니다. 코드를 확인해보면 다른 언어의 함수와도 어느정도 닮아있습니다.

 

 

뿐만아니라 레이아웃을 구성하는 모든 요소들도 위젯으로 이루어져 있습니다. 웹에 비유해보면 div태그도 위젯 p태그도 위젯 모든 태그를 위젯으로 생각하시면 됩니다.

 

심지어 가로정렬을 해주는 Row 위젯과 세로정렬을 해주는 Column위젯 가운데 정렬 해주는 Center위젯 등 위치 정렬에 대한 위젯들도 존재합니다.

 

 

 

🚀Stateless Widget

---

stateless 위젯은 상태가 없는 정적인 위젯입니다. 변화가 없는 위젯이라고 생각할 수 있습니다.

특징으로는 스크린상에 존재만 할 뿐 아무것도 하지 않습니다.

그래서 실시간 데이터를 저장하지 않고 어떤 변화를 유발시키는 value 값을 갖지 않습니다.

예시로는 Text 위젯과 Image 위젯이 있을 수 있습니다.

 

 

🚀Stateful Widget

---

stateful 위젯은 계속해서 변화하거나 항상 움직이는 위젯입니다. 

특징으로는 사용자의 상호작용에 의해 모양이 바뀝니다.

그리고 데이터를 받을 때도 모양이 바뀝니다.

예시로는 Text Field가 있을 수 있습니다.

 

 

 

🙋‍♂️Widget Tree

---

플러터에서 위젯들을 tree구조로 정리할 수 있습니다.

한 위젯 내에 다른 위젯들을 포함시킬 수 있기에 위젯들은 서로 부모 자식 관계로 구성됩니다.

 

위와같이 인스타그램의 Instagram 부분이 위와 같은 형식으로 구성됩니다.

저 Text 위젯 안에서도 다양한 속성값들을 거치면 보이는 인스타그램 문구를 만들 수 있습니다.