Flutter document를 참조해서 위젯과 관련된 유용한 정보들을 요약했습니다.
요약한 정보이기 때문에 확실한 이해는 실제 코딩을 해보면서 깨우치는 것이 필요합니다.
1. Layout widget(LW) Visible widget(VW)
flutter의 위젯은 Layout widget과 Visible widget으로 구분할 수 있다. LW은 Container, Center와 같은 위젯처럼 child나 children property가 있는 위젯이다. VW은 Text, Image 같은 위젯들이다. 그래서 일반적으로 LW이 VW을 감싼 형태다.
2. Standard widgets, Material widgets
- standart : Container, GridView, ListView, Stack
- Material widgets : Card, ListTile
3. Stateful widget, Stateless widget
사용자의 이벤트에 따라 위젯이 변한다면 stateful, 변하지 않는다면 stateless widget이다.
state object에 위젯의 상태와 위젯의 모양이 저장된다. state object에는 변경될 수 있는 값들로 구성되어 있고, setState를 호출해서 framework에게 위젯들을 다시 그리도록 할 수 있다.
4. Managing state
위젯의 상태를 관리하는 방법은 크게 세가지가 있습니다. 어떤 방법을 선택할지는 위젯 디자이너의 결정에 달려있습니다.
1. 위젯 스스로가 상태를 관리하는 법
2. 부모 위젯이 관리하는 법
3. 1번과 2번을 혼합하여 관리하는 법
어떤 방법을 사용할지는 위젯 디자이너의 선택의 몫이지만 만약에 체크박스의 선택 여부라던지, PageView의 position 값 같은 것이라면 부모가 상태를 관리하는 것이 좋습니다. 이와 다르게 애니메이션 같은 디자인적/미학적인 부분이라면 위젯 자신이 상태를 관리하는 것이 좋습니다. 구분이 확실치 않다면 부모 위젯이 관리하는 것을 추천합니다.
또한 버튼 클릭 같은 기능인 경우 부모가 해당 클릭의 시점과 특정 데이터들을 알아야 한다면 property로 함수를 추가하는 것도 좋은 방법이다.
5. Constraints
Flutter 개발자들은 화면 작업을 하면서 overflow 에러를 자주 볼 것이다. 그리고 특정 위젯이 원하는 위치와 사이즈로 그려지지 않아서 많은 시간을 할애 할 것이다. 이러한 어려움을 이겨내기 위해서는 아래의 규칙을 배워야 한다.
Rules, Limitations
flutter의 위젯 트리를 어떻게 구성하고 있냐고 질문하면 아래의 문장이 가장 깔끔한 답변이다. 물론 이 룰을 이해하지 못한 경우에는 무슨 뜻인지 알 수 없을 것이다.
Constraints go down. Sizes go up. Parent sets position.
Rules
- 위젯은 제약 조건을(constraints) 부모에게 받아온다. 그리고 제약조건은 min/max width, min/max height 4개가 있다.
- 그다음에 위젯은 children에게 제약조건이 무엇인지 알려주고, 각각의 child에게 원하는 size를 물어본다. (ListView를 생각해보면 된다)
- 마지막으로 child 위젯은 부모 위젯에게 사이즈를 알려준다.
Limitations
Flutter의 layout engine은 몇 가지의 제한을 두고있다.
- 위젯은 부모에게 받은 제약 조건 내에서 자신의 사이즈를 결정할 수 있다. 이것이 의미하는 것은 위젯이 원하는 사이즈를 가질 수 없다는 것이다.
- 위젯은 본인 스스로 화면 내에 어디에 위치할 지 결정할 수 없다. position을 결정하는 것은 부모 위젯이다.
- 부모 위젯의 사이즈와 위치 또한 부모 위젯의 부모 위젯에 의존한다. 때문에 전체 위젯 트리를 고려하지 않고 특정 위젯의 사이즈와 위치를 정확하게 정의하는 것은 불가능하다.
- 자식 위젯이 부모 위젯과 다른 사이즈를 원하지만 자식 위젯을 정렬하기 위한 정보를 정의하지 않는다면 자식의 크기는 무시될 수 있다. 때문에 구체적으로 정렬 방식을 입력하는게 필요하다.
Tight vs loose constraints
tight constraints는 min/max값이 동일하다.
minimun width = maximum width, minimum height = maximum height
반면 loose constrains는 min/max값이 다르다.
