OverflowBox 위젯

OverflowBox는 자식 위젯의 제약조건(constraints)을 부모와 독립적으로 설정할 수 있게 해주는 위젯입니다. 자식이 부모의 경계를 벗어나도록 허용하며, 이는 의도적으로 오버플로우가 필요한 경우에 유용합니다.

속성

• minWidth: number | undefined - 자식의 최소 너비
• maxWidth: number | undefined - 자식의 최대 너비
• minHeight: number | undefined - 자식의 최소 높이
• maxHeight: number | undefined - 자식의 최대 높이
• alignment: Alignment - 자식 위젯의 정렬 방식 (기본값: Alignment.center)
• child: Widget - 자식 위젯

일반적인 사용 사례

1. 부모보다 큰 자식 허용:

   Container({
     width: 100,
     height: 100,
     child: OverflowBox({
       maxWidth: 150,
       maxHeight: 150,
       child: Container({
         color: "blue"
       })
     })
   })
   

2. 특정 크기 강제:

   OverflowBox({
     minWidth: 200,
     maxWidth: 200,
     minHeight: 100,
     maxHeight: 100,
     child: Container({
       child: Text("고정 크기 콘텐츠")
     })
   })
   

모범 사례

1. 사용 시기:

   • 자식이 부모보다 커야 할 때
   • 특정 크기를 강제해야 할 때
   • 의도적인 오버플로우가 필요할 때

2. 주의사항:

   • 불필요한 오버플로우는 피하기
   • 레이아웃 문제의 임시방편으로 사용하지 않기
   • 접근성과 사용자 경험 고려하기

팁과 요령

1. 레이아웃 디버깅:

   • 임시 배경색 사용하여 경계 확인
   • 오버플로우 영역 시각화
   • 정렬 동작 검증

2. 성능 최적화:

   • 필요한 경우에만 사용
   • 중첩 사용 피하기
   • 불필요한 제약조건 제거