16. [Flutter] FractionallySizedBox 부모위젯 공간 비율로 자식위젯 너비, 높이 정하기

FractionallySizedBox 

FractionallySizedBox 위젯은 부모 컨테이너 내에서 비율로 크기를 조정하는 데 사용되는 Flutter 위젯입니다. FractionallySizedBox는 부모 컨테이너의 가로 및 세로 공간에 대해 상대적인 비율을 지정할 수 있습니다.

이를 통해 화면 크기에 독립적으로 위젯의 크기를 조정할 수 있습니다.

 

FractionallySizedBox(
  widthFactor: double,  // 가로 비율 (0.0 ~ 1.0)
  heightFactor: double, // 세로 비율 (0.0 ~ 1.0)
  alignment: AlignmentGeometry, // 정렬 방식 (선택 사항)
  child: Widget, // 자식 위젯
)

• widthFactor: 부모 컨테이너의 가로 공간에 대한 비율
• heightFactor: 부모 컨테이너의 세로 공간에 대한 비율
  0.0에서 1.0 사이의 값을 가질 수 있으며, 1.0은 부모 컨테이너의 전체 너비 또는 높이에 해당합니다.
• alignment: 자식 위젯이 부모 컨테이너 내에서 정렬되는 방식을 지정하는 데 사용됩니다.
  alignment은 Alignment 또는 AlignmentDirectional 클래스의 인스턴스일 수 있습니다.
  예를 들어, alignment: Alignment.center로 설정하면 자식 위젯이 부모 컨테이너의 중앙에 정렬됩니다.
• child: FractionallySizedBox 위젯의 자식 위젯을 나타냅니다. 
  이 자식 위젯은 부모 컨테이너 내에서 FractionallySizedBox 위젯의 크기와 정렬 설정에 따라 조정됩니다.

---

사용된 예시.

 

비율로 변하는 모습