Flutter FractionallySizedBox 위젯으로 비율 기반 레이아웃 쉽게 구현하기

728x90

FractionallySizedBox는 부모 위젯의 크기에 비례해 자식 위젯의 크기를 조정할 수 있는 매우 유용한 레이아웃 위젯입니다. 반응형 디자인이 필수인 현대 앱 개발에서 FractionallySizedBox는 자주 사용되지는 않지만, 그 기능을 제대로 이해하면 효율적으로 레이아웃을 조정할 수 있습니다.

이 글에서는 FractionallySizedBox의 개념, 사용법, 그리고 활용 예시를 통해 이 위젯이 앱 개발에서 얼마나 유용하게 활용될 수 있는지 살펴보겠습니다.

1. FractionallySizedBox란 무엇인가?

FractionallySizedBox는 이름에서 알 수 있듯이, 부모 위젯의 크기를 기준으로 자식 위젯의 크기를 비율적으로 설정하는 위젯입니다. Flutter에서 제공하는 다른 레이아웃 위젯들과 달리, FractionallySizedBox는 크기를 고정된 값으로 설정하지 않고, 부모 위젯의 크기에 비례하여 자식 위젯의 크기를 정할 수 있습니다.

이 위젯은 주로 반응형 디자인에서 유용하게 쓰이며, 다양한 화면 크기나 해상도에 맞춰 UI 요소들이 적절한 크기로 표시되도록 조정할 수 있습니다. 즉, 특정 화면 크기에 종속되지 않고 비율에 따라 유동적인 UI를 구성할 수 있게 해주는 역할을 합니다.

2. FractionallySizedBox의 주요 속성

FractionallySizedBox는 몇 가지 중요한 속성을 가지고 있으며, 이를 통해 위젯의 크기를 조정할 수 있습니다.

widthFactor: 부모 위젯의 너비를 기준으로 자식 위젯의 너비를 설정합니다. 예를 들어, widthFactor: 0.5로 설정하면 자식 위젯의 너비는 부모 위젯의 50%가 됩니다.
heightFactor: 부모 위젯의 높이를 기준으로 자식 위젯의 높이를 설정합니다. 마찬가지로, heightFactor: 0.7로 설정하면 자식 위젯의 높이는 부모 위젯의 70%가 됩니다.
alignment: 자식 위젯이 부모 위젯 안에서 어떻게 정렬되는지를 결정합니다. 기본값은 Alignment.center로, 자식 위젯이 중앙에 배치됩니다. 필요에 따라 다른 정렬 옵션을 사용할 수 있습니다.

이 속성들을 적절히 조합하면, 다양한 비율의 크기를 가진 UI 요소를 손쉽게 구현할 수 있습니다.

3. FractionallySizedBox의 사용 예시

FractionallySizedBox를 어떻게 활용할 수 있는지 간단한 예제를 통해 살펴보겠습니다. 아래 코드는 부모 컨테이너의 크기에 따라 자식 위젯의 크기가 50%로 설정된 예시입니다.

Container(
  color: Colors.grey,
  height: 200,
  width: 200,
  child: FractionallySizedBox(
    widthFactor: 0.5,
    heightFactor: 0.5,
    child: Container(
      color: Colors.blue,
    ),
  ),
)

이 코드에서 Fractionallysizedbox의 widthFactor와 heightFactor가 모두 0.5로 설정되어 있습니다. 부모 컨테이너의 크기는 200x200이므로, 자식 위젯은 그 절반인 100x100 크기로 렌더링됩니다.

결과적으로, 부모 컨테이너(회색)의 중앙에 자식 컨테이너(파란색)가 50%의 크기로 배치됩니다.

4. FractionallySizedBox의 활용 시나리오

FractionallySizedBox는 특히 반응형 UI 설계에서 매우 유용합니다. 다양한 화면 크기나 비율에 맞춰 자동으로 조정되는 UI 요소를 만들 수 있기 때문입니다. 아래에서 그 구체적인 활용 시나리오를 살펴보겠습니다.

1) 반응형 레이아웃

앱을 개발할 때 다양한 디바이스와 화면 크기에 대응해야 하는 경우가 많습니다. FractionallySizedBox를 사용하면 화면 크기에 맞춰 UI 요소의 크기가 비례적으로 조정되므로, 특정 해상도나 디바이스에 종속되지 않고 유연한 레이아웃을 만들 수 있습니다.

예를 들어, 이미지나 버튼의 크기를 부모 위젯의 80% 정도로 설정하여 화면 크기가 변하더라도 적절한 크기로 유지되도록 할 수 있습니다.

Container(
  color: Colors.white,
  child: FractionallySizedBox(
    widthFactor: 0.8,
    heightFactor: 0.4,
    child: Image.network('https://example.com/image.png'),
  ),
)

이 코드는 부모 위젯의 80% 너비와 40% 높이를 가진 이미지를 나타냅니다. 화면 크기가 변하더라도 이미지는 부모 컨테이너의 비율에 따라 크기가 조정됩니다.

2) 다양한 해상도에서 균형 잡힌 UI

웹이나 모바일 앱에서 다양한 해상도와 디바이스에 맞춰 UI를 자동으로 조정해야 할 때 FractionallySizedBox는 큰 도움이 됩니다. 특히, 해상도가 높은 기기와 낮은 기기에서 UI가 비슷하게 보이도록 크기를 조정하는 데 유용합니다.

Scaffold(
  body: Center(
    child: FractionallySizedBox(
      widthFactor: 0.6,
      heightFactor: 0.3,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('클릭하세요'),
      ),
    ),
  ),
)

이 코드는 버튼을 부모 컨테이너의 60% 너비와 30% 높이로 설정합니다. 다양한 해상도에서 버튼의 크기는 자동으로 조정되어 일관된 사용자 경험을 제공합니다.

3) 비율 기반 카드 레이아웃

앱에서 카드 형태의 UI를 많이 사용합니다. 카드의 크기를 비율적으로 설정하면, 화면 크기에 따라 카드가 적절히 배치되고 사용자의 화면 경험을 최적화할 수 있습니다.

Container(
  height: 300,
  width: double.infinity,
  child: FractionallySizedBox(
    widthFactor: 0.9,
    heightFactor: 0.8,
    child: Card(
      child: Center(
        child: Text('비율 기반 카드'),
      ),
    ),
  ),
)

여기서는 부모 컨테이너의 90% 너비와 80% 높이를 가진 카드 UI를 구현했습니다. 화면 크기가 달라지더라도 카드의 크기가 부모 컨테이너의 비율에 맞춰 조정됩니다.

5. FractionallySizedBox vs. 다른 레이아웃 위젯

FractionallySizedBox는 비율 기반의 레이아웃을 쉽게 구현할 수 있지만, 비슷한 역할을 하는 다른 Flutter 레이아웃 위젯들과 비교했을 때 특성이 다릅니다.

Container: 고정된 크기나 비율을 설정할 수 있지만, 부모 위젯의 크기에 따라 자동으로 크기를 조정하는 기능은 없습니다.
Expanded: 남은 공간을 차지하도록 자식 위젯을 확장하는 역할을 하지만, 부모 위젯의 크기를 기준으로 비율적인 조정은 불가능합니다.
AspectRatio: 특정 가로:세로 비율을 유지하게 해주는 위젯이지만, 부모 위젯의 전체 크기를 기준으로 하는 FractionallySizedBox와는 다릅니다.

따라서, 부모 위젯의 크기를 기준으로 자식 위젯의 크기를 비율적으로 조정하고 싶다면 FractionallySizedBox가 적합한 선택입니다.

6. 결론

Flutter에서 FractionallySizedBox는 비율 기반의 반응형 UI를 구축할 때 매우 유용한 위젯입니다. 부모 위젯의 크기에 따라 자식 위젯의 크기를 자동으로 조정할 수 있어, 다양한 화면 크기에서 일관된 사용자 경험을 제공합니다. FractionallySizedBox를 적절하게 활용하면, 다양한 기기에서 최적화된 UI를 구성하고 사용자에게 매끄러운 디자인을 제공할 수 있습니다.

Flutter 앱 개발에서 FractionallySizedBox의 기능과 활용법을 이해하고 사용해 본다면, 더 유연하고 효율적인 레이아웃을 구현할 수 있을 것입니다.