[flutter] velocity_x를 사용하여 어떻게 북마크 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

Flutter는 굉장히 강력한 UI 프레임워크로, 다양한 애니메이션 효과를 만들 수 있습니다. 이번 블로그에서는 velocity_x 패키지를 사용하여 북마크 애니메이션을 만드는 방법을 알아보겠습니다.

velocity_x란?

velocity_x는 Flutter에서 애니메이션을 쉽게 다룰 수 있게 해주는 패키지입니다. 이 패키지를 사용하면 단 몇 줄의 코드로 다양한 애니메이션 효과를 구현할 수 있습니다. velocity_x 패키지를 사용하려면 아래와 같이 의존성을 추가해야 합니다.

dependencies:
  velocity_x: ^2.1.0

이번 예제에서는 velocity_x를 사용하여 북마크 애니메이션을 만들어보겠습니다.

북마크 애니메이션 만들기

첫 번째로, velocity_x 패키지를 import합니다.

import 'package:velocity_x/velocity_x.dart';

그리고 StatefulWidget을 상속받는 새로운 위젯을 만듭니다.

class BookmarkAnimation extends StatefulWidget {
  @override
  _BookmarkAnimationState createState() => _BookmarkAnimationState();
}

다음으로, _BookmarkAnimationState 클래스를 생성합니다. 이 클래스는 실제로 애니메이션을 처리하는 로직을 구현합니다.

class _BookmarkAnimationState extends State<BookmarkAnimation>
    with TickerProviderStateMixin {
  
  AnimationController _animationController;
  bool isBookmarked = false;
  
  @override
  void initState() {
    super.initState();
    
    // AnimationController 초기화
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
  }
  
  @override
  void dispose() {
    // AnimationController 해제
    _animationController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isBookmarked = !isBookmarked;
          if (isBookmarked) {
            _animationController.forward();
          } else {
            _animationController.reverse();
          }
        });
      },
      child: VxBox(
        child: Icon(
          Icons.bookmark,
          color: isBookmarked ? Colors.blue : Colors.grey,
        ),
      )
          .roundedFull
          .make()
          .p16()
          .animate(
            // 애니메이션 효과 적용
            _animationController,
            Curves.easeInOut,
          ),
    );
  }
}

위 코드에서는 isBookmarked라는 변수를 사용하여 북마크 상태를 관리하고, GestureDetector를 사용하여 터치 이벤트를 감지합니다. 터치 이벤트가 발생하면 isBookmarked 값을 변경하고, AnimationController를 사용하여 애니메이션을 실행합니다. isBookmarked 값에 따라 북마크 아이콘의 색상이 변경되고, 애니메이션 효과가 적용됩니다.

마지막으로, 위젯을 사용하는 메인 앱을 작성합니다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('북마크 애니메이션 예제'),
      ),
      body: Center(
        child: BookmarkAnimation(),
      ),
    ),
  ));
}

위에서 작성한 BookmarkAnimation 위젯을 화면에 나타냅니다.

이제 앱을 실행해보면, 북마크 아이콘을 터치할 때마다 색상이 변경되고 애니메이션 효과가 적용됨을 확인할 수 있습니다.

결론

Flutter에서는 velocity_x 패키지를 사용하여 간단하게 애니메이션 효과를 만들 수 있습니다. 이번 예제에서는 북마크 애니메이션을 만드는 방법을 알아보았습니다. velocity_x를 응용해서 더 다양한 애니메이션 효과를 만들어보세요!

velocity_x란?

북마크 애니메이션 만들기

결론

참고 자료