[flutter] cached_network_image 패키지를 사용하여 이미지를 동적으로 변경하는 방법을 알려주세요.

08 Dec 2023

flutter

이번 포스트에서는 cached_network_image 패키지를 사용하여 Flutter 앱에서 이미지를 동적으로 변경하는 방법에 대해 알아보겠습니다.

1. cached_network_image 패키지 설치

먼저, 프로젝트의 pubspec.yaml 파일에 다음과 같이 cached_network_image 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.0.0

설정을 마친 후 패키지를 설치하기 위해 터미널에서 아래 명령어를 실행합니다.

flutter pub get

2. CachedNetworkImage 위젯 사용

다음으로, CachedNetworkImage 위젯을 사용하여 동적으로 이미지를 변경합니다. 아래 예시는 이미지 URL을 상태 변수에 따라 동적으로 변경하는 방법을 보여줍니다.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String imageUrl = 'initial_image_url';

  void changeImage() {
    setState(() {
      imageUrl = 'new_image_url';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              changeImage();
            },
            child: CachedNetworkImage(
              imageUrl: imageUrl,
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
        ),
      ),
    );
  }
}

위와 같이 CachedNetworkImage를 사용하여 imageUrl을 상태 변수로 관리하고, onTap 이벤트를 통해 이미지 URL을 동적으로 변경할 수 있습니다.

결론

이렇게 cached_network_image 패키지를 활용하여 Flutter 앱에서 동적 이미지를 효과적으로 관리하고 변경할 수 있습니다. 부가적인 기능으로 이미지의 로딩 중 및 에러 상태에 대한 처리도 간편하게 할 수 있습니다.

더 많은 정보는 공식 Github 저장소에서 확인할 수 있습니다.

이상으로 cached_network_image 패키지를 사용하여 이미지를 동적으로 변경하는 방법에 대해 알아보았습니다. 만약 궁금한 점이 있으시다면 언제든지 물어봐 주세요!