[flutter] 플러터에서 cached_network_image 패키지를 사용하여 이미지에 요소를 스와이프하는 방법을 알려주세요.

08 Dec 2023

flutter

플러터 앱에서 이미지를 표시하고 스와이프하는 기능을 제공하려면 cached_network_image 패키지와 함께 carousel_slider 패키지를 사용할 수 있습니다.

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

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.0.0
  carousel_slider: ^4.0.0

다음으로, 아래와 같이 코드를 작성하여 이미지 슬라이더를 만들 수 있습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageSlider(),
    );
  }
}

class ImageSlider 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('Image Slider'),
      ),
      body: CarouselSlider(
        options: CarouselOptions(
          height: 400.0,
          enlargeCenterPage: true,
          enableInfiniteScroll: false,
        ),
        items: imageUrls.map((url) {
          return Builder(
            builder: (BuildContext context) {
              return CachedNetworkImage(
                imageUrl: url,
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
              );
            },
          );
        }).toList(),
      ),
    );
  }
}

위 코드에서 imageUrls 리스트에 표시할 이미지의 URL을 정의하고, CarouselSlider 위젯을 사용하여 이미지를 스와이프할 수 있는 슬라이더를 생성합니다. 각 이미지는 CachedNetworkImage 위젯을 사용하여 캐싱된 이미지로 표시됩니다.

이렇게 하면 cached_network_image 패키지와 carousel_slider 패키지를 사용하여 이미지에 요소를 스와이프할 수 있는 기능을 구현할 수 있습니다.