[flutter] AspectRatio를 활용하여 UI 성능 향상시키기

21 Dec 2023

flutter

앱의 UI를 개발할 때 화면 비율을 유지하면서 이미지를 효율적으로 화면에 표시할 수 있는 방법이 필요한 경우가 있습니다. 여기서 AspectRatio 위젯을 활용하는 방법을 알아보겠습니다.

AspectRatio 위젯

AspectRatio 위젯은 자식 위젯의 종횡비(가로 세로 비율)을 유지하면서 크기를 조절하는 데 사용됩니다. 이를 통해 이미지나 비디오와 같이 종횡비가 중요한 컨텐츠를 효율적으로 화면에 배치할 수 있습니다.

아래는 AspectRatio 위젯을 사용하는 간단한 예제입니다.

AspectRatio(
  aspectRatio: 16/9, // 원하는 종횡비 설정
  child: Image.asset('assets/example.png'),
)

위 예제에서는 AspectRatio 위젯을 사용하여 이미지를 16:9의 비율로 유지하면서 화면에 표시하고 있습니다.

성능 개선

AspectRatio 위젯을 사용하면 화면 비율을 유지해야 하는 경우에도 성능을 향상시킬 수 있습니다. 만약 이미지의 원본 크기가 화면에 표시되는 크기보다 큰 경우, AspectRatio 위젯은 자식 위젯의 크기를 조절하여 화면에 최적화된 이미지를 표시합니다. 이는 화면에 표시되는 불필요한 이미지 부분을 최소화하여 성능을 향상시킵니다.

아래는 AspectRatio를 활용하여 UI 성능을 개선하는 예제입니다.

AspectRatio(
  aspectRatio: 4/3, // 원하는 종횡비 설정
  child: Image.network(
    'https://example.com/image.jpg',
    fit: BoxFit.cover, // 이미지를 화면에 맞게 자르기
  ),
)

위 예제에서는 AspectRatio 위젯을 사용하여 4:3의 비율로 이미지를 화면에 효율적으로 표시하고 있습니다.

AspectRation을 사용하여 UI를 개발할 때 종횡비를 유지하면서 이미지를 화면에 효율적으로 표시할 수 있으며, 이는 성능 향상에 기여할 수 있습니다.

이상으로 AspectRatio를 활용하여 UI 성능을 향상시키는 방법에 대해 알아보았습니다.

참고 자료:

Flutter AspectRatio 위젯 문서