본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 둥근 모서리가 있는 캐시 이미지를 생성하세요., Create rounded cached image in Flutter

by 베타코드 2023. 12. 18.
반응형

질문


네트워크에서 이미지를 가져오고 Flutter에서 캐시된 원형 이미지를 만들고 싶습니다.

네트워크에서 가져온 원형 이미지를 캐시하지 않는 코드를 찾았습니다.

new Container(
    width:80.0,
    height: 80.0,
    decoration: new BoxDecoration(
    shape: BoxShape.circle,
        image: new DecorationImage(
            image: new NetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
        ),
    ),
),

이제 네트워크에서 이미지를 가져오고 캐시하고 표시하는 위젯을 찾았습니다.

new CachedNetworkImage(imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg')

하지만 NetworkImage 위젯을 CachedNetworkImage로 대체하면 이미지가 아닌 타입이라는 오류가 발생합니다.

어떻게 하면 이미지를 캐시할 수 있는 원형 이미지를 만들 수 있을까요?

수정됨: 답변에서 제안한 대로 다음과 같이 시도해보았지만 여전히 같은 오류가 발생합니다: 'CachedNetworkImage' 인자 유형은 'DecorationImage' 매개변수 유형에 할당할 수 없습니다.

              decoration: new BoxDecoration(
                shape: BoxShape.circle,
                image: new CachedNetworkImage(image: 
                      'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
              ),

답변


CachedNetworkImage은 이미지의 표시를 더욱 사용자 정의할 수 있는 빌더(ImageWidgetBuilder)를 가지고 있습니다. 다음과 같이 시도해보세요:

CachedNetworkImage(
  imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
  imageBuilder: (context, imageProvider) => Container(
    width: 80.0,
    height: 80.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: imageProvider, fit: BoxFit.cover),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

placeholdererrorWidget은 위젯이므로 원하는 대로 원하는 위젯을 넣고 사용자 정의할 수 있습니다.

반응형

댓글