[flutter] 플러터 carousel_slider 설치 방법

04 Dec 2023

flutter

이 문서에서는 Flutter 앱에서 Carousel Slider를 사용하는 방법을 알려드리겠습니다. Carousel Slider는 이미지나 컨텐츠를 슬라이드 형태로 표시하는 유용한 도구입니다.

1. 패키지 추가

먼저, carousel_slider 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 아래 코드를 추가하세요.

dependencies:
  carousel_slider: ^4.0.0-nullsafety.0

패키지 버전은 현재 Flutter 프로젝트의 버전에 맞게 변경할 수 있습니다. 참고로, nullsafety.0는 널 안정성을 지원하는 패키지 버전을 의미합니다.

2. 패키지 설치

터미널을 열고 Flutter 프로젝트의 루트 디렉토리에서 아래 명령어를 실행하여 패키지를 설치하세요.

flutter pub get

설치가 완료되면, pubspec.lock 파일에 패키지의 의존성이 추가될 것입니다.

3. Carousel Slider 사용

이제 Carousel Slider를 사용할 준비가 되었습니다. Flutter 코드에서 Carousel Slider 위젯을 생성하고 이미지나 컨텐츠를 추가할 수 있습니다.

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

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

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        aspectRatio: 16 / 9,
        viewportFraction: 0.8,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 2),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        autoPlayCurve: Curves.fastOutSlowIn,
        enlargeCenterPage: true,
      ),
      items: images.map((String imageUrl) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(8.0),
                image: DecorationImage(
                  image: NetworkImage(imageUrl),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서, images 리스트에 슬라이드할 이미지 URL을 포함시키고, options를 사용하여 Carousel Slider의 옵션을 설정할 수 있습니다. 필요에 따라 옵션을 수정하여 사용하십시오.

4. Carousel Slider로 위젯 사용하기

이제 Carousel Slider를 사용하여 Flutter 위젯으로 추가할 수 있습니다. 예를 들어, HomePage 위젯에서 Carousel Slider를 사용하려면 아래와 같이 코드를 작성하세요.

import 'package:flutter/material.dart';
import 'package:your_app/my_carousel.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider Example'),
      ),
      body: Center(
        child: MyCarousel(),
      ),
    );
  }
}

이제 Carousel Slider가 포함된 Flutter 앱을 빌드하고 실행하면, 이미지 슬라이더를 볼 수 있을 것입니다.

이제 Flutter 프로젝트에서 Carousel Slider를 사용하는 방법을 알게 되셨습니다. 다양한 옵션을 적용하여 원하는 대로 슬라이드를 커스터마이즈할 수 있습니다. 자세한 내용은 carousel_slider 패키지의 문서를 참조하세요.