[flutter] cached_network_image 패키지를 사용하여 이미지에 도형을 추가하는 방법을 알려주세요.
cached_network_image 패키지를 사용하면 네트워크에서 이미지를 캐시로 저장하여 불러올 수 있으며, 이미지 위에 도형을 추가할 수 있습니다. 아래는 이미지 위에 도형을 추가하는 방법에 대한 예제 코드입니다.
1. 패키지 설치
먼저 cached_network_image 패키지를 pubspec.yaml 파일에 추가합니다.
dependencies:
flutter:
sdk: flutter
cached_network_image: ^3.0.0
그리고 다음 명령어를 사용하여 패키지를 설치합니다.
$ flutter pub get
2. 이미지에 도형 추가하기
다음은 cached_network_image 패키지를 사용하여 이미지에 도형을 추가하는 예제 코드입니다.
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Cached Network Image with Shape',
home: Scaffold(
appBar: AppBar(
title: Text('Cached Network Image with Shape'),
),
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: CachedNetworkImage(
imageUrl: 'https://example.com/image.jpg',
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
),
),
);
}
}
위의 예제 코드에서 ClipRRect 위젯을 사용하여 이미지에 원하는 도형을 추가할 수 있습니다. borderRadius 속성을 사용하여 이미지에 원하는 모양을 지정할 수 있습니다.
위 코드를 사용하면 cached_network_image 패키지를 통해 네트워크에서 이미지를 캐싱하고, ClipRRect 위젯을 통해 이미지에 도형을 추가할 수 있습니다.
이제 위의 예제를 참고하여 원하는 도형을 이미지에 추가해 보세요!