[flutter] velocity_x를 사용하여 어떻게 이미지 갤러리 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

이미지 갤러리 애니메이션을 만들기 위해 Flutter에서 velocity_x 패키지를 사용할 수 있습니다. velocity_x는 Flutter의 UI 작성을 간소화하고 손쉽게 애니메이션 효과를 추가할 수 있는 플러그인입니다.

velocity_x 패키지 설치하기

dependencies:
  velocity_x: ^1.3.0

pubspec.yaml 파일에 위와 같이 velocity_x 패키지를 추가합니다. 다음으로 패키지를 설치하기 위해 터미널에서 아래 명령어를 실행합니다.

flutter pub get

이미지 갤러리 애니메이션 만들기

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

class ImageGalleryAnimation extends StatefulWidget {
  @override
  _ImageGalleryAnimationState createState() => _ImageGalleryAnimationState();
}

class _ImageGalleryAnimationState extends State<ImageGalleryAnimation> {
  int _currentIndex = 0;

  List<String> _imagePaths = [
    'assets/images/image1.jpg',
    'assets/images/image2.jpg',
    'assets/images/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: 'Image Gallery Animation'.text.make(),
      ),
      body: VStack(
        [
          Image.asset(
            _imagePaths[_currentIndex],
            fit: BoxFit.cover,
            height: 300,
          )
              .animatedBox
              .fadeIn(duration: 500)
              .p8
              .onTap(() {
            setState(() {
              if (_currentIndex == _imagePaths.length - 1) {
                _currentIndex = 0;
              } else {
                _currentIndex++;
              }
            });
          }),
          HStack(
            _imagePaths.asMap().entries.map((entry) {
              int index = entry.key;
              String imagePath = entry.value;

              return Icon(
                Icons.circle,
                color: _currentIndex == index ? Colors.blue : Colors.grey,
                size: _currentIndex == index ? 12 : 8,
              ).onTap(() {
                setState(() {
                  _currentIndex = index;
                });
              });
            }).toList(),
            alignment: MainAxisAlignment.center,
            axisSize: MainAxisSize.max,
          ).p16(),
        ],
        alignment: MainAxisAlignment.center,
      ).p(16),
    );
  }
}

위의 코드는 이미지 갤러리를 만들고 각 이미지를 탭할 때마다 애니메이션을 통해 다음 이미지로 전환하는 예제입니다.

사용 방법

velocity_x 패키지를 pubspec.yaml 파일에 추가하고 패키지를 설치합니다.
ImageGalleryAnimation 클래스를 생성하고 StatelessWidget이 아닌 StatefulWidget을 상속합니다.
_currentIndex 변수를 사용하여 현재 선택된 이미지의 인덱스를 추적합니다.
_imagePaths 변수에 사용할 이미지의 경로를 입력합니다.
build() 메서드에서 velocity_x의 fadeIn 애니메이션을 사용하여 이미지를 전환하고, onTap() 메서드로 이미지를 탭할 때마다 _currentIndex를 업데이트합니다.
아래에 원형 버튼 목록을 표시하기 위해 HStack 위젯을 사용합니다. _currentIndex와 해당 인덱스를 비교하여 선택된 이미지에 대해 다른 스타일을 적용합니다.
애니메이션을 추가하기 위해 사용할 이미지를 Image.asset() 위젯으로 감싸줍니다.

이제 위의 방법에 따라 velocity_x를 사용하여 이미지 갤러리 애니메이션을 구현할 수 있습니다.

velocity_x 패키지 설치하기

이미지 갤러리 애니메이션 만들기

사용 방법

참고 자료