FittedBox class
fit 에 따라 자식의 크기를 조정하고 위치를 지정합니다.
공식 문서 코드
FittedBox 는 자식 위젯을 부모 위젯의 크기에 맞춰주게 만들어주는 위젯이다. 정확히 말하면 그것만을 위해 존재하는 위젯이다.
한번 가볍게 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| child | Widget? | – | 확대 또는 축소 대상이 되는 자식 위젯 |
| fit | BoxFit | BoxFit.contain | 자식 위젯을 어떤 비율로 박스에 맞출지 결정하는 방식 |
| alignment | AlignmentGeometry | Alignment.center | 자식 위젯이 박스 내에서 어떻게 정렬될지 결정 |
| clipBehavior | Clip | Clip.none | 자식이 넘치는 경우 어떤 방식으로 잘라낼지 결정 |
속성표를 보니 조금 감이 오는가? 그렇다. Container 같은 거에 기본적으로 다 달려있는 거다. 다만 이 FittedBox 는 더 사용하기 쉽게 SizedBox 는 크기만 조절할 수 있다면 FuttedBox 는 fit 만 조절 할 수 있도록 만들어져 있다.
우리가 흔히 SizedBox 를 사용하는 것처럼 사용하면 된다는 말이다.
가장 중요한 속성은 당연하게도 fit 일 것이다. fit 은 BoxFit 을 받고 우리는 생성자로 이제 어떠한 것을 넣을지 결정하면 된다.
FittedBox 의 본체인 BoxFit enum 은 이런 종류가 있다.
fill
소스의 종횡비를 왜곡하여 대상 상자를 채웁니다.
contain
가능한 한 크게 하되, 대상 상자 안에 소스를 완전히 포함하도록 합니다.
cover
대상 상자 전체를 덮는 동시에 가능한 한 작게 만듭니다.
실제로 콘텐츠를 잘라내려면 FittedBox 와 함께 clipBehavior: Clip.hardEdge 를 사용하세요.
fitWidth
소스가 대상 상자를 수직으로 넘치더라도 소스의 전체 너비가 표시되는지 확인하세요.
실제로 콘텐츠를 잘라내려면 FittedBox 와 함께 clipBehavior: Clip.hardEdge 를 사용하세요.
fitHeight
소스가 대상 상자를 수평으로 넘치더라도 소스의 전체 높이가 표시되는지 확인하세요.
실제로 콘텐츠를 잘라내려면 FittedBox 와 함께 clipBehavior: Clip.hardEdge 를 사용하세요.
none
소스를 대상 상자 안에 맞추고(기본적으로 가운데 맞춤) 상자 밖에 있는 소스 부분을 버립니다.
원본 이미지의 크기가 조정되지 않았습니다.
실제로 콘텐츠를 잘라내려면 FittedBox 와 함께 clipBehavior: Clip.hardEdge 를 사용하세요.
scaleDown
소스를 대상 박스 안에 (기본적으로 중앙에) 정렬하고, 필요할 경우 크기를 줄여서 박스 안에 맞춥니다.
만약 이미지를 줄여야 한다면 contain 처럼 작동하고, 그렇지 않으면 아무런 스케일 조정 없이 (none) 그대로 표시됩니다.
뭐 이렇게 있다. 그 밖에도 하위속성으로 clipBehavior 가 있는데 이 친구 Clip.none 으로 해놓거나 이러면 위젯이 잘려서 보이지 않을 때 보이게 되니 참고 바란다.
이렇게 간단한 BoxFit 기능을 제공해 주는 Fitted class 를 알아보았다. 도움이 되었길 바라며 마치겠다.
