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

05 Dec 2023

flutter

Flutter는 강력한 UI 개발 프레임워크로써 다양한 애니메이션 효과를 구현할 수 있습니다. 이번 블로그에서는 velocity_x 라이브러리를 사용하여 간단한 배지 애니메이션을 만드는 방법을 알아보겠습니다.

1. velocity_x 패키지 설치하기

먼저, velocity_x 패키지를 프로젝트에 추가해야합니다. pubspec.yaml 파일에 다음과 같이 velocity_x를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^2.1.0

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

2. 배지 위젯 만들기

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

class BadgeAnimation extends StatefulWidget {
  @override
  _BadgeAnimationState createState() => _BadgeAnimationState();
}

class _BadgeAnimationState extends State<BadgeAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );

    _controller.repeat(reverse: true); // 애니메이션을 반복하면서 왕복하도록 설정
  }

  @override
  void dispose() {
    _controller.dispose(); // 애니메이션 컨트롤러 해제
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return VxAnimatedBadge(
      animation: Tween<double>(begin: 1.0, end: 1.5) // 애니메이션 크기 설정
          .animate(_controller),
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    );
  }
}

위의 코드는 BadgeAnimation 클래스를 선언한 후, VxAnimatedBadge 위젯을 사용하여 배지 애니메이션을 만들고 있습니다. VxAnimatedBadge 위젯은 animation 속성을 통해 크기 애니메이션을 정의하며, child 속성으로 배지 모양을 구성할 수 있습니다.

3. 사용하기

위에서 만든 배지 애니메이션을 사용하는 방법은 간단합니다. 다른 위젯에 배치하여 화면에 표시하면 됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: BadgeAnimation(), // 배지 애니메이션 위젯 사용
        ),
      ),
    );
  }
}

위의 코드에서는 main.dart 파일에 BadgeAnimation 위젯을 사용하여 배지 애니메이션을 화면 중앙에 표시하고 있습니다.

결론

이렇게 velocity_x 패키지를 사용하여 Flutter에서 배지 애니메이션을 만들 수 있습니다. VxAnimatedBadge 위젯을 사용하여 쉽고 간단하게 애니메이션 효과를 추가할 수 있습니다. 추가적인 설정이나 다양한 애니메이션 효과를 적용하려면 velocity_x 패키지의 문서를 참고하시기 바랍니다.

참고자료:

velocity_x 패키지: https://pub.dev/packages/velocity_x
Flutter 애니메이션 가이드: https://flutter.dev/docs/development/ui/animations