[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. 다수의 이미지 로딩

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

class MultipleImagesScreen extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Images'),
      ),
      body: ListView.builder(
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return CachedNetworkImage(
            imageUrl: imageUrls[index],
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          );
        },
      ),
    );
  }
}

위의 예시에서는 ListView.builder를 사용하여 imageUrls 리스트의 이미지를 로드하고, CachedNetworkImage 위젯을 이용하여 각 이미지를 보여줍니다.

3. 개별 이미지 제어

각 이미지에 대한 제어를 위해 CachedNetworkImage 위젯의 속성들을 활용할 수 있습니다. 예를 들어 placeholder 속성을 사용하여 로딩 중에 보여줄 위젯, errorWidget 속성을 사용하여 이미지 로드 중 오류 발생 시 보여줄 위젯을 설정할 수 있습니다.

이제 위의 방법을 활용하여 cached_network_image 패키지를 사용하여 다수의 이미지를 동시에 로딩하고 보여줄 수 있습니다.

참고 문헌: