IntrinsicHeight class

이름을 보자마자 Intrinsic이 무슨 의미지? 하는 질문이 생겼다.

찾아보니 Intrinsic는 고유한, 본질적인 이라는 뜻이다.

뜻 그대로 IntrinsicHeight는 child의 고유 높이에 맞춰 child의 크기를 조정하는 위젯이다.

이 위젯은 높이가 제한되지 않고 무한 확장을 시도하는 child를 필요로 할 때 유용하다.

이 위젯이 child에게 전달하는 constraints는 부모의 constraints를 지키기 때문에 만약 constraints가 child의 최대 고유 높이를 포함할 만큼 충분히 크지 않으면 비교적 낮은 높이를 가지게 된다. 반대로, 최소 높이 constraints가 child의 최대 고유 높이보다 크면 비교적 더 많은 높이가 지정된다.

• 부모의 constraints < child의 고유 높이
  낮은 높이를 가지게 된다.
• 부모의 constraints > child의 고유 높이
  높은 높이를 가지게 된다.
  
  

즉, child는 부모의 constraints를 따르는데, constraints가 존재하지 않는 경우가 있다. 이 때 부모의 constraints와 child의 고유 높이 사이의 관계에 대한 것이다.

가능한 사용하지 않는 것을 추천한다.

<사용 전>

<사용 후>

FractionallySizedBox class

FractionallySizedBox class는 상위 부모의 사이즈 비율에 맞게 만드는 것이다.
즉 디자인의 크기가 상대적이어야 할 때 크기를 상위 부모의 사이즈를 바탕으로 비율로 표현하는 것이다.

example)

• FractionallySizedBox를 사용해서 상위 부모의 사이즈 비율을 지정하여 child의 크기를 정하고 있다.
• 코드에서 0.7은 70%를 나타낸다. 즉 상위 부모 사이즈의 70%만큼 child를 만들겠다는 의미이다.
• widthFactor처럼 heightFactor을 사용하여 높이의 비율도 설정할 수 있다.

이처럼 FractionallySizedBox class는 상위 부모의 사이즈 비율로 크기를 지정할 때 사용한다.

FittedBox Class

child 또는 내용의 양에 따라 크기가 확장되는 위젯에 의해 오버플로우가 발생되는 경우 FittedBox로 감싸면 전체 크기를 넘지 않게 되며 오버플로우가 방지된다.

alignment를 사용하여 원하는 배열로 나타낼 수 있다.

example)

사용 전)

사용 후)

이처럼 부모에서 주어진 크기 내에 child를 생성할 때 오버플로우가 발생하지 않도록 하기 위해 주로 사용한다.

fittedBox는 부모 크기에 맞춰 child 크기를 조정하는 것이다.
BoxFit.cover를 사용하면 부모 크기에 딱 맞게 child 크기를 조정할 수 있다.

참고) https://medium.com/flutter-community/flutter-widgets-boxes-part-2-the-whole-picture-4bb142f0b1ab

CustomSingleChildLayout

childe의 레이아웃을 지정하는 위젯이다.

• delegate은 child 레이아웃의 constraints를 결정할 수 있다. 또한 child를 어디에 둘지, parent의 크기를 결정한다. 하지만 parent는 child의 크기에 의존하지 않는다.
• CustomSingleChildLayout은 delegate를 지정해야 한다.
• 주로 grid를 만들 때 쓰인다.

정리하면, child의 위치, 크기를 결정할 때 사용하는 layout 중 하나이다.

example 1)

const CustomSingleChildLayout({
    Key key,
    @required this.delegate,
    Widget child,
  })

example 2)

Widget single(){
  return CustomSingleChildLayout(delegate: delegate)
}