Flutter 앱을 개발하다 보면 화면 크기에 따라 UI 요소가 유동적으로 변해야 하는 경우가 있습니다. 이때 AspectRatio 위젯은 화면의 가로 세로 비율을 유지하면서 UI 요소의 크기를 조정하는 데 도움을 줍니다. 이 글에서는 AspectRatio의 역할과 기능에 대해 자세히 알아보겠습니다.

1. AspectRatio의 역할

AspectRatio는 자식 요소의 크기를 부모 요소의 화면 비율에 맞게 조정하는 데 사용됩니다. 이를 통해 UI 요소가 화면의 크기에 구애받지 않고 일정한 비율을 유지할 수 있습니다. 따라서 사용자의 디바이스가 다양한 크기와 비율을 갖는 경우에도 일관된 UI 경험을 제공할 수 있습니다.

2. AspectRatio의 기능

AspectRatio는 aspectRatio 속성을 통해 원하는 가로 세로 비율을 설정할 수 있습니다. 이 값은 부모 요소의 크기에 상대적으로 설정되며, 자식 요소의 크기는 부모 요소의 aspectRatio와 일치하도록 조정됩니다.

AspectRatio(
  aspectRatio: 16 / 9, // 가로 세로 비율 설정
  child: Container(
    color: Colors.blue,
  ),
)

위의 예시에서 Container는 AspectRatio의 가로 세로 비율을 따라 크기가 조정됩니다. 이를 통해 가로 세로 비율이 일정한 UI를 구성할 수 있습니다.

마무리

AspectRatio는 화면 크기에 따라 유동적으로 변하는 UI를 개발할 때 유용한 도구입니다. 화면 비율을 유지하면서 일정한 UI를 제공하는 데 활용할 수 있으며, 다양한 디바이스에 대응하는 반응형 디자인을 구현하는 데 필수적인 위젯 중 하나입니다.

이상으로 AspectRatio의 역할과 기능에 대해 살펴보았습니다. 부족한 부분이 있을 수 있으나, 추가적인 학습을 통해 실무에 적용해보시기를 권장합니다.

자료 출처: Flutter.dev - AspectRatio class