Flutter 플러터 컨테이너가 다른 컨테이너 안에 있을 때 너비와 높이 제약을 존중하지 않는 이유는 무엇인가요?, Why Flutter Container does not respects its width and height constraints when it is inside other Container

질문

Container(
  width: 200.0,
  height: 200.0,
  child: Container(
    width: 50.0,
    height: 50.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red
    ),
  ),
)

I've been trying to find the answer in the Container class docs but I did not find it.

Update:

After a long time, I understood the problem.

All views inside a layout must have width, height, x position, and y position. (This applies to Android, IOS, Flutter, etc)

In my code, the inner container just has a width and height for that reason it doesn't know where to start painting.

For that reason, if the container is placed inside an Alignment widget the container gets the x position and y position and it works.

답변

플러터에서의 제약은 일반적인 방식과 약간 다릅니다. 위젯 자체에는 제약이 없습니다.

Container에 width/height를 지정할 때, Container를 제약하는 것이 아니라 Container의 자식을 제약합니다.

Container는 자식의 크기에 따라 자체 크기를 조정합니다.

따라서 부모 위젯은 항상 자손의 크기를 결정하는 데에 권한을 가집니다.

이를 우회하려면 Align 위젯을 사용해야 합니다:

Container(
  width: 200.0,
  height: 200.0,
  child: Align(
    alignment: Alignment.topLeft,
    child: Container(
      width: 50.0,
      height: 50.0,
      decoration:
          BoxDecoration(shape: BoxShape.circle, color: Colors.red),
    ),
  ),
);

---

이는 이상하고 제한적으로 보일 수 있습니다. 그러나 이 단 하나의 이상함이 플러터의 레이아웃을 강력하고 조합 가능하게 만드는 이유입니다.