Flutter 앱을 개발하다 보면 화면 크기나 디바이스의 종횡비(가로 대 세로 비율)에 따라 UI 요소의 비율을 유연하게 조정해야 하는 경우가 있습니다. 이때 AspectRatio 위젯을 사용하여 UI 요소의 크기를 비율적으로 유지하면서 디바이스 크기에 맞게 조정할 수 있습니다.

AspectRatio란?

AspectRatio는 자식 위젯의 가로와 세로 비율을 유지하도록 도와주는 Flutter 위젯입니다. 이를 사용하면 UI 요소의 가로와 세로 길이를 유연하게 조절할 수 있습니다.

AspectRatio 사용하기

예를 들어, 가로 세로 비율이 2:1인 버튼을 만들어야 한다고 가정해봅시다. 이때 AspectRatio 위젯을 사용하여 버튼의 가로와 세로 비율을 설정할 수 있습니다.

AspectRatio(
  aspectRatio: 2 / 1, // 가로 세로 비율을 설정
  child: ElevatedButton(
    onPressed: () {
      // 버튼 클릭 시 실행할 작업
    },
    child: Text('비율 조정된 버튼'),
  ),
)

위 코드에서 AspectRatio 위젯은 자식 위젯으로 ElevatedButton을 가지고 있으며, aspectRatio 속성을 사용하여 가로와 세로 비율을 2:1로 지정합니다.

마무리

AspectRatio를 사용하면 디바이스의 종횡비에 상관없이 UI 요소의 가로와 세로 비율을 유연하게 유지할 수 있습니다. 이를 통해 Flutter 앱의 UI를 보다 더 유연하고 적응성 높게 설계할 수 있습니다.

이상으로 AspectRatio를 사용하여 버튼 비율을 조정하는 방법에 대해 알아보았습니다. 관련하여 궁금한 점이 있다면 언제든지 물어보세요.

자료 참고: Flutter AspectRatio class