[flutter] cached_network_image 패키지를 사용하여 이미지를 좌우로 움직이는 효과를 추가하는 방법을 알려주세요.

08 Dec 2023

flutter

cached_network_image 패키지는 Flutter에서 웹에서 이미지를 표시할 때 유용한 패키지입니다. 이미지 슬라이더와 같은 좌우로 움직이는 효과를 추가하려면 CachedNetworkImage와 PageView 위젯을 함께 사용할 수 있습니다.

이제 어떻게 하는지 살펴보겠습니다.

Step 1: cached_network_image 패키지 추가

먼저, pubspec.yaml 파일에 cached_network_image 패키지를 추가합니다.

dependencies:
  cached_network_image: ^2.5.1

패키지를 추가한 후에는 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

Step 2: PageView 위젯으로 이미지 슬라이더 생성

다음으로, PageView 위젯을 사용하여 이미지 슬라이더를 생성합니다. PageView 위젯은 페이지를 좌우로 슬라이딩하는 뷰를 제공하는데, 이를 이용하여 이미지를 좌우로 움직이는 효과를 구현할 수 있습니다.

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

class ImageSlider extends StatelessWidget {
  final List<String> imageUrls;

  ImageSlider(this.imageUrls);

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: imageUrls.length,
      itemBuilder: (context, index) {
        return CachedNetworkImage(
          imageUrl: imageUrls[index],
          fit: BoxFit.cover,
        );
      },
    );
  }
}

Step 3: 이미지 URL 리스트 전달

마지막으로, ImageSlider 위젯에 이미지 URL 리스트를 전달하여 사용합니다.

List<String> imageList = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Slider'),
        ),
        body: ImageSlider(imageList),
      ),
    );
  }
}

이제 코드를 실행하면 좌우로 움직이는 이미지 슬라이더를 확인할 수 있습니다.

위 방법으로 cached_network_image 패키지를 사용하여 이미지를 좌우로 움직이는 효과를 추가할 수 있습니다. 추신: 이외에도 다양한 효과를 추가하는 방법이 있으니 참고해주세요.