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),
),
placeholder
와 errorWidget
은 위젯이므로 원하는 대로 원하는 위젯을 넣고 사용자 정의할 수 있습니다.
반응형