[flutter] carousel_slider에서 텍스트 애니메이션 효과 추가하기

04 Dec 2023

flutter

Flutter의 carousel_slider 패키지는 이미지나 위젯들을 스와이프로 전환해주는 기능을 제공합니다. 그러나 이 기능에 텍스트 애니메이션 효과를 추가하려면 추가적인 작업이 필요합니다.

Step 1: 애니메이션을 위한 package import

먼저, 텍스트 애니메이션을 구현하기 위해 flutter_sequence_animation 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래의 코드를 추가한 후 flutter pub get 명령어로 패키지를 설치하세요.

dependencies:
  flutter_sequence_animation: ^2.0.0

Step 2: 애니메이션 코드 작성

다음으로, 텍스트 애니메이션을 구현하기 위해 다음과 같이 코드를 작성하세요.

import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

class TextAnimation {
  final SequenceAnimation sequenceAnimation;

  TextAnimation(this.sequenceAnimation);

  Animation get animation => sequenceAnimation['textAnimation'];

  void start() {
    sequenceAnimation.reset();
    sequenceAnimation.delayedStart();
  }
}

Step 3: CarouselSlider에 애니메이션 추가

이제 carousel_slider 패키지를 사용하여 슬라이더를 생성하고, 텍스트 애니메이션을 추가해보겠습니다.

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

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

class _MyCarouselState extends State<MyCarousel> {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];
  final TextAnimation textAnimation = TextAnimation(SequenceAnimationBuilder()
      .addAnimatable(
        animatable: Tween<double>(begin: 0, end: 1),
        from: Duration.zero,
        to: const Duration(milliseconds: 500),
        tag: 'textAnimation',
      )
      .animate(CurvedAnimation(
          parent: TickerProvider,
          curve: Curves.easeInOut)));

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        return AnimatedBuilder(
          animation: textAnimation.animation,
          builder: (BuildContext context, Widget child) {
            return Opacity(
              opacity: textAnimation.animation.value,
              child: Text(
                items[index],
                style: TextStyle(fontSize: 20),
              ),
            );
          },
        );
      },
      options: CarouselOptions(),
    );
  }
}

Step 4: 애니메이션 시작하기

마지막으로, 애니메이션을 시작하기 위해 필요한 start() 메소드를 호출해야 합니다. 이는 슬라이더가 화면에 나타날 때마다 호출될 수 있도록 적절한 위치에 배치되어야 합니다.

@override
void initState() {
  super.initState();
  Future.delayed(Duration.zero, () {
    textAnimation.start();
  });
}

...

@override
Widget build(BuildContext context) {
  ...
}

위 코드를 통해 carousel_slider에 텍스트 애니메이션 효과를 추가할 수 있습니다. flutter_sequence_animation 패키지를 사용하여 텍스트가 나타나고 사라지는 애니메이션을 구현하였습니다.