[flutter] velocity_x를 사용하여 어떻게 슬라이드 쇼 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

소개

슬라이드 쇼는 사용자에게 이미지나 콘텐츠를 시각적으로 전달하는 효과적인 방법입니다. Flutter에서는 Velocity_X 패키지를 사용하여 간단하고 부드러운 슬라이드 쇼 애니메이션을 만들 수 있습니다. 이 블로그 포스트에서는 Velocity_X를 사용하여 어떻게 슬라이드 쇼 애니메이션을 만들 수 있는지 알아보겠습니다.

설정

프로젝트에 Velocity_X 패키지를 추가하기 위해 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter

  velocity_x: ^1.3.0

의존성을 추가한 후, flutter packages get 명령어를 실행하여 패키지를 설치합니다.

슬라이드 쇼 애니메이션 만들기

새로운 Flutter 앱을 만듭니다.
main.dart 파일을 열고 다음 코드를 추가합니다:

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

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

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

class SlideShow extends StatefulWidget {
  @override
  _SlideShowState createState() => _SlideShowState();
}

class _SlideShowState extends State<SlideShow>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

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

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _images[_currentIndex]
        .fitNetworkImage()
        .centered()
        .p12()
        .box
        .rounded
        .shadowMd
        .make()
        .gesture(
          onTap: () {
            setState(() {
              _currentIndex++;
              if (_currentIndex >= _images.length) {
                _currentIndex = 0;
              }
            });
          },
        )
        .fadeIn(
          duration: Duration(milliseconds: 500),
          curve: Curves.easeIn,
        );
  }
}

위의 코드에서는 SlideShow라는 StatefulWidget을 만들고 _SlideShowState 클래스에서 애니메이션을 관리합니다. _images 리스트는 슬라이드 쇼에 표시할 이미지 URL 목록입니다.

슬라이드 쇼는 GestureDetector를 사용하여 터치 이벤트를 처리하고, Velocity_X의 체인 메서드를 사용하여 이미지에 스타일과 애니메이션을 적용합니다. fadeIn 메서드는 이미지가 전환될 때 부드럽게 나타나도록 애니메이션을 추가합니다.

앱을 실행하고 슬라이드 쇼를 확인합니다. 이미지를 탭하면 다음 이미지로 전환됩니다.

결론

이 블로그 포스트에서는 Flutter의 Velocity_X 패키지를 사용하여 슬라이드 쇼 애니메이션을 만드는 방법을 알아보았습니다. Velocity_X는 강력한 체인 메서드 API를 제공하여 UI 요소에 스타일과 애니메이션을 쉽게 적용할 수 있습니다. 이러한 간편함으로 슬라이드 쇼와 같은 시각적 효과를 만드는 작업을 더욱 쉽고 효율적으로 수행할 수 있습니다.

소개

설정

슬라이드 쇼 애니메이션 만들기

결론

참고 자료