[flutter] 5강 | Widget

1. 플러터 상에서의 widget이란?

 

✅ 일반적인 Widget의 설명

 - 독립적으로 실행되는 작은 프로그램

 - 주로 바탕화면 등에서 날씨나 뉴스 등 생활정보 등을 보여줌

 - 그래픽이나 데이터를 처리하는 함수를 갖고 있음

 

✅ What is Widget in flutter?

 - UI를 만들고 구성하는 모든 기본 단위 요소(ex. textFiled, text etc)

 - 눈에 보이지 않는 요소들까지 위젯 (ex. padding, marging, center, column etc)

 - Everthing is a widget (View마저도 위젯)

 -> 위젯으로만 구성함으로 코드로만 작성해. 그래서 스토리보드가 따로 없어.

 

2. Stateless widgets 🆚 Stateful widgets

 

✅ Type of Widget

 - Stateless Widget : 상태가 없는 정적인 위젯 

 - Stateful Widget : 계속 움직임이나 변화가 있는 동적인 위젯 (이벤트 처리 가능)

 - Inherited Widget

 

✅ Stateless과 Stateful의 일반적인 의미

 - Stateful : value값을 지속적으로 추적 보존

 - Stateless : 이전 상호작용의 어떠한 값도 저장하지 않음. 

 

✅ Stateless Widget

 - 스크린 상에 존재만 할 뿐 아무것도 하지 않음.

 - 어떠한 실시간 데이터도 저장하지 않음.

 - 어떤 변화를 변화시키는 value값을 저장하지 않음.

 

✅ stateful Widget

 - 사용자의 상호작용에 따라 모양이 바뀜

 - 데이터를 받게 되었을 때 모양이 바뀜 

 

3. Widget tree

 

✅ Flutter Widget tree

 - widget들은 tree 구조로 정리될 수 있음

 - 한 Widget내에 얼마든지 다른 widget들이 포함될 수 있음

 - Widget은 부모 위젯과 자식 위젯으로 구성

 - Parent widget을 widget container라고 부르기도 함

 

위젯 트리

나만의 용어로 매칭

AppBar -> ios 네비게이션 바

center -> 뷰의 내용을 담는 부분 html로 치면 body