Flutter 부모의 크기에 따라 위젯을 배치하는 방법은 어떻게 하나요?, How can I layout widgets based on the size of the parent?

질문

부모 위젯이 가변 크기를 가질 수 있는 경우를 가정해보겠습니다.

예를 들어:

var container = new Container(
   height: 200.0, // 이것이 변경될 수 있다고 상상해보세요
   width: 200.0, // 이것이 변경될 수 있다고 상상해보세요
   // 이 컨테이너 내용은 부모 컨테이너에 따라 달라질 수 있다고 상상해보세요
   child: new Container(), 
);

그리고 아마도 부모 컨테이너의 자식이 주어진 크기에 따라 다른 것을 렌더링하고 싶을 수 있습니다.

반응형 디자인 브레이크포인트를 생각해보세요. 너비가 X보다 크면이 레이아웃을 사용하고, 너비가 X보다 작으면 다른 레이아웃을 사용하세요.

Flutter에서 이것을 하는 가장 좋은 방법은 무엇인가요?

답변

레이아웃 시간에 부모 위젯의 제약 조건을 제공하며 LayoutBuilder 위젯을 사용해야합니다.

LayoutBuilder는 BuildContext와 BoxConstraints를 매개 변수로 사용하는 build() 함수를 사용합니다. 이를 사용하여 크기에 따라 동적으로 위젯을 렌더링 할 수 있습니다.

부모 너비가 200px보다 크면 "LARGE"를 렌더링하고 그렇지 않으면 "SMALL"을 렌더링하는 위젯의 간단한 예제를 작성해 보겠습니다.

var container = new Container(
  // 자식 컨테이너에서 렌더링되는 내용을 변경하려면 너비를 100에서 300으로 전환하십시오.
  // 
  width: 100.0,
  // width: 300.0
  child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if(constraints.maxWidth > 200.0) {
        return new Text('BIG');
      } else {
        return new Text('SMALL');
      }
    }
  ),
);