[flutter] AspectRatio를 활용하여 텍스트 박스 비율 조정하기

21 Dec 2023

flutter

Flutter 앱을 개발할 때 UI 요소들을 다양한 디바이스 화면 크기에 대응시키는 것은 중요합니다. AspectRatio를 사용하면 특정 비율을 유지하면서 UI 요소의 크기를 조절할 수 있습니다. 이 기능을 활용하여 텍스트 박스의 비율을 조정하는 방법을 알아보겠습니다.

AspectRatio는 자식 위젯의 가로 세로 비율을 유지하면서 크기를 조절하는 Flutter의 내장 위젯입니다. AspectRatio 위젯을 사용하면 부모 위젯의 크기에 맞게 자식 위젯을 배치하면서 가로 세로 비율을 유지할 수 있습니다.

예를 들어, AspectRatio를 사용하여 이미지나 텍스트 박스의 가로 세로 비율을 설정할 수 있습니다. 이를 통해 UI가 다양한 화면 크기에서도 일관된 비율로 표시될 수 있습니다.

텍스트 박스 비율 조정하기

아래는 AspectRatio를 사용하여 텍스트 박스의 가로 세로 비율을 조정하는 간단한 예제 코드입니다.

AspectRatio(
  aspectRatio: 3 / 2, // 가로 세로 비율 설정
  child: Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        'Aspect Ratio Example',
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
    ),
  ),
)

위 코드에서 AspectRatio 위젯의 aspectRatio 속성을 사용하여 원하는 가로 세로 비율을 설정할 수 있습니다. 이 예제에서는 3:2 비율을 텍스트 박스에 적용하고 있습니다.

결론

Flutter의 AspectRatio를 활용하면 텍스트 박스와 같은 UI 요소의 비율을 쉽게 조정할 수 있습니다. 이를 통해 다양한 화면 크기에서 일관된 UI를 제공할 수 있습니다.

참고: Flutter AspectRatio Widget

AspectRatio Widget 이해하기

텍스트 박스 비율 조정하기

결론