Flutter FractionallySizedBox widget

flutter 를 사용하다보면 html 처럼 부모 위젯의 크기에 비례하여 사이즈 조절을 하고 싶을 떄가 있다. 그때 사용 하는 것이 FractionallySizedBox 위젯이다. 

 

[FractionallySizedBox]

FractionallySizedBox 위젯은 부모 위젯의 크기에 대한 상대적인 크기로 자식 위젯의 크기를 조정하는 위젯으로  widthFactor와 heightFactor 매개변수를 사용하여 자식 위젯의 너비와 높이를 부모 위젯의 너비와 높이의 비율로 지정할 수 있다. 

 

이렇게 부모의 사이즈의 반반으로 위젯을 배치하고 싶다면 아래와 같이 써 주면 된다. 

참고로 0.5 는 50% 를 뜻하고 1.0 은 100%를 뜻한다.

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  child: Container(
    color: Colors.blue,
  ),
)

 

그러면 부모의 크기가 500 일때나, 400 일때나 항상 반(50%)을 차지 하고 있기 때문에 반응형 웹에서도 잘 쓰이는 구조가 될 것 같다. 

 

[참고]

한가지 문제가 있다면 해당 위젯을 쓸 때 Flexible 이나 SizedBox.expand 로 감싸서 구현 하는 것이 좋다. 왜냐하면, BoxConstraints forces an infinite height 같은 오류가 자주 뜨기 때문에 유연하게 내부 위젯들의 사이즈를 조절해 주어야 한다. 그리고 그것이 심신에 안정을 줄 것이다. 나도 알고 싶지 않았따... 

Flexible ( 
child : FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  child: Container(
    color: Colors.blue,
  ),
 )
)

SizedBox.expand ( 
child : FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  child: Container(
    color: Colors.blue,
  ),
 )
)