[Flutter] Constraints 이해하기

 

이번 포스팅에서는 Flutter의 Constraints에 대해 알아보겠습니다. 

 

Flutter 개발자들은 작업을 하면서 overflow 에러를 자주 볼 것입니다. 그리고 특정 위젯이 원하는 위치와 사이즈로 그려지지 않아서 많은 시간을 낭비하기도 할 것입니다. 이러한 시간을 절약하고, 어려움을 이겨내기 위해서는 Flutter의 constraints 규칙을 이해하는 것이 도움 될 수 있습니다.

 

 

 

 

1. constraints의 핵심

2. Limitations

3. Tight vs loose constraints

 

 

 

 

1. constraints의 핵심

Flutter constraints의 핵심은 다음 문장입니다. Flutter의 위젯 트리를 어떻게 구성하고 있냐고 질문한다면 아래의 문장이 가장 핵심이라고 할 수 있습니다. 물론 룰을 모른다면 이해하기 어려울 것입니다. 

 

Constraints go down. Sizes go up. Parent sets position.

 

좀 더 자세하게 풀어보겠습니다.

• Constraints go down : 위젯은 제약 조건(constraints)를 부모에게 받아옵니다. 제약조건은 min/max width, min/max height 4가지가 있습니다. 
• Sizes go up : 위젯은 children(자식 위젯들)에게 제약조건을 알려줍니다. 그리고 각각의 child(자식 위젯)에게 원하는 사이즈를 물어봅니다. 그다음 children들을 차례차례 배치시킵니다.
• Parent sets position : 마지막으로 constraints를 받아온 부모 위젯에게 본인의 사이즈를 알려줍니다. 

 

 

 

2. Limitations

물론 위의 규칙에도 제한 사항들이 있습니다.

• 위젯은 부모에게 받은 제약 조건 내에서만 자신의 사이즈를 결정할 수 있습니다. 이는 위젯 본인은 원하는 사이즈를 가질 수 없다는 것입니다. 결정하는 것은 부모 위젯입니다. 우리가 Column이나 Row를 위젯을 사용할 때 alignmet 특성으로 자식 위젯들을 배치시키는 것을 생각해 보면 좋습니다. 
• 부모 위젯의 사이즈와 위치 또한 부모 위젯의 부모 위젯에 의존합니다. 때문에 전체 위젯 트리를 고려하지 않고, 특정 위젯의 사이즈와 위치를 정확하게 정의하는 것은 불가능합니다. 
• 자식 위젯이 부모와 다른 크기를 원하지만 부모가 이를 정렬할 정보가 충분하지 않은 경우 자식의 크기는 무시될 수 있습니다. 때문에 정렬 방식은 구체적이어야 합니다.
  
  

 

 

3. Tight vs loose constraints

제약의 종류를 두 가지로 구분한다면 tight constraints와 loose constraints가 있습니다.

앞선 설명에서 제약조건은 min/max width, min/max height 4가지가 있다고 얘기했었습니다. tight는 min과 max값이 같은 것을 의미합니다. 

tight width => minimun width = maximum width
tight height => minimum height = maximum height

그래서 정확한 사이즈를 강제할 수 있습니다.

 

반면 loose는 min과 max가 다른 것을 의미합니다. 최소와 최대값을 다르게 입력함으로써 위젯의 사이즈를 범위로 설정할 수 있습니다. 

 

 

 

 

 

Flutter의 constraints와 layout에 대해 더 많은 정보를 알고 싶다면 공식 문서를 참고해 보시기 바랍니다.

https://docs.flutter.dev/development/ui/layout/constraints