Flutter/Flutter FAQ

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

독학코딩 2023. 12. 18. 09:21
반응형

질문


네트워크에서 이미지를 가져오고 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은 위젯이므로 원하는 대로 원하는 위젯을 넣고 사용자 정의할 수 있습니다.

반응형