[flutter] carousel_slider에서 아이템에 맞는 투명도 변경하기

04 Dec 2023

flutter

개요

Flutter에서 carousel_slider 패키지를 사용하여 이미지 카루셀을 만들 때, 특정 아이템에 대한 투명도를 조절하고 싶은 경우가 있습니다. 이 글에서는 carousel_slider에서 아이템에 맞는 투명도를 변경하는 방법을 알아보겠습니다.

carousel_slider 패키지 사용하기

carousel_slider는 Flutter에서 이미지를 슬라이드하는 기능을 제공하는 패키지입니다. 먼저 프로젝트의 pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^1.4.1

이후 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치합니다.

투명도 변경하기

carousel_slider에서 아이템에 맞는 투명도를 변경하려면, CarouselSlider 위젯을 사용하고 itemBuilder에 해당 아이템을 빌드하는 코드를 작성해야 합니다. itemBuilder에서 투명도를 변경하려는 아이템을 찾고, 해당 아이템에 대한 opacity 속성을 조정하면 됩니다.

아래는 carousel_slider에서 투명도를 변경하는 예시 코드입니다.

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

class MyCarousel extends StatefulWidget {
  @override
  _MyCarouselState createState() => _MyCarouselState();
}

class _MyCarouselState extends State<MyCarousel> {
  List<String> images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: images.length,
      itemBuilder: (BuildContext context, int index) {
        // 현재 보여지는 아이템인 경우 투명도를 변경
        double opacity = index == currentIndex ? 1.0 : 0.5;

        return Opacity(
          opacity: opacity,
          child: Image.asset(
            images[index],
            fit: BoxFit.cover,
          ),
        );
      },
      options: CarouselOptions(
        onPageChanged: (index, reason) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}

위의 코드에서는 currentIndex를 사용하여 현재 보여지는 아이템의 인덱스를 추적하고, 이를 기반으로 투명도를 변경하고 있습니다. 현재 보여지는 아이템인 경우, opacity를 1.0으로 설정하고, 그렇지 않은 경우 0.5로 설정하였습니다.

결론

이제 carousel_slider에서 아이템에 맞는 투명도를 변경하는 방법을 알게 되었습니다. 위의 예시 코드를 기반으로 원하는 대로 투명도를 조정하여 다양한 슬라이드 효과를 구현해보세요!