Flutter 앱을 개발할 때 종종 이미지가 화면에 적절한 비율로 표시되도록 하는 것이 중요합니다. AspectRatio 위젯을 사용하면 이미지의 종횡비를 쉽게 조정할 수 있습니다.

AspectRatio란 무엇인가요?

AspectRatio는 자식 위젯(주로 이미지)의 가로-세로 비율을 유지하면서 부모 위젯의 공간을 차지하도록 하는 위젯입니다. 이를 통해 이미지가 원래의 비율을 유지하며 부모 위젯의 크기에 맞춰져 화면에 표시됩니다.

AspectRatio를 사용하여 배경 이미지의 비율 조정하기

다음은 AspectRatio를 사용하여 배경 이미지의 비율을 조정하는 간단한 예제 코드입니다.

AspectRatio(
  aspectRatio: 16 / 9, // 가로:세로 비율 설정
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/background_image.jpg'),
        fit: BoxFit.cover,
      ),
    ),
  ),
),

위 코드에서, AspectRatio 위젯은 16:9의 가로-세로 비율을 갖도록 설정되어 있습니다. 이 위젯은 자식으로 Container를 가지고 있으며, Container의 배경에 원하는 이미지를 설정한 후, fit 속성을 사용하여 이미지가 화면에 꽉 차도록 조정할 수 있습니다.

이제 AspectRatio를 이용하여 배경 이미지의 비율을 조정하는 방법에 대해 기본적으로 이해하셨습니다. 앞으로 Flutter 앱 개발 시 이미지를 보다 쉽게 다루기 위해 AspectRatio를 활용하세요!

더 많은 정보를 원하시면 Flutter 공식 문서를 참고해보세요!

이 포스트는 Flutter-AspectRatio-Tutorial를 참고하여 작성하였습니다.