Flutter 앱에서 네트워크에서 이미지를 로드하고 표시할 때, 종종 이미지의 가로 세로 비율을 유지하는 것이 중요합니다. 이를 위해 cached_network_image 패키지를 사용하여 이미지의 가로 세로 비율을 유지할 수 있습니다.

cached_network_image 패키지 설치

먼저 pubspec.yaml 파일에 cached_network_image 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.1.0

그런 다음 터미널에서 flutter pub get 명령을 사용하여 패키지를 설치합니다.

이미지 로드 및 가로 세로 비율 유지

cached_network_image 패키지를 사용하여 이미지의 가로 세로 비율을 유지하는 방법은 매우 간단합니다. CachedNetworkImage 위젯을 사용하고 fit 속성을 BoxFit.cover로 설정하여 가로 세로 비율을 유지할 수 있습니다.

다음은 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class MyImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CachedNetworkImage(
        imageUrl: 'https://example.com/image.jpg',
        fit: BoxFit.cover, // 이미지의 가로 세로 비율 유지
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
    );
  }
}

이렇게 하면 cached_network_image 패키지를 사용하여 이미지의 가로 세로 비율을 유지하면서 네트워크에서 이미지를 로드하고 표시할 수 있습니다.

더 많은 세부적인 설정 및 기능을 확인하려면 cached_network_image 패키지 문서를 참조하세요.