[flutter] cached_network_image 패키지를 사용하여 이미지의 모서리를 둥글게 처리하는 방법을 알려주세요.

08 Dec 2023

flutter

먼저, “cached_network_image” 패키지를 프로젝트에 추가해야 합니다. 이를 위해 pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 패키지를 추가합니다:

dependencies:
  cached_network_image: any

이후, 이미지를 불러올 때 CachedNetworkImage 위젯을 사용하여 모서리를 둥글게 처리할 수 있습니다. 아래와 같이 borderRadius 속성을 이용하여 모서리를 원하는 정도로 조절할 수 있습니다.

CachedNetworkImage(
  imageUrl: '이미지 주소',
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

이렇게 하면 “cached_network_image” 패키지를 사용하여 이미지의 모서리를 둥글게 처리할 수 있습니다.