[Flutter] Constraints 이해하기

Constraints란?

어떤 프로그래밍이든 제약조건이 있습니다. 실생활에 지켜야 할 법이 있듯이 프로그래밍에서도 규칙을 지키도록 강제해놓은 것이죠.

Flutter도 마찬가지입니다. 일반적으로 많은 개발자가 가장 먼저 접하는 웹, HTML과는 다른 방식으로 움직이기 때문에 다른 Constraints를 가지고 있습니다.

Flutter의 레이아웃은 이 규칙을 따라 구성됩니다.

이 제약은 크기 제약입니다. 크기는 width와 height의 최소/최대값입니다. 부모 위젯은 이런 크기 제약을 자식에게 넘기는 것입니다. 위젯의 위치를 결정하는 것은 결국 그 위젯이 아니라 위젯의 부모입니다.

Container위젯으로 예시를 들어보겠습니다.

Container(
  color: Colors.amber,
)

Container no-constraints

이렇게 꽉 찬 화면이 만들어집니다. 그럼 Container 위젯의 사이즈를 조정해볼까요?

Container(
  color: Colors.amber,
  height: 100,
  width: 100,
);

Container no-constraints

width와 height를 지정했음에도 변하는 건 없습니다.

그러면 자식 위젯을 가운데에 위치시키는 Center 위젯을 사용해 보겠습니다.

Center(
  child: Container(
    color: Colors.amber,
    height: 100,
    width: 100,
));

Container with Center

부모의 제약이 생기니 height와 width가 제대로 적용이 된 것을 볼 수 있습니다.

여기서