[flutter] velocity_x를 사용하여 어떻게 프로그래스 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

프로그래스 애니메이션은 Flutter 앱에서 중요한 요소 중 하나입니다. 사용자에게 작업이 진행 중임을 시각적으로 알려주는 동시에 앱의 사용성을 향상시킵니다. 이번에는 Flutter의 velocity_x 패키지를 사용하여 간단한 프로그래스 애니메이션을 만드는 법을 알아보겠습니다.

velocity_x란?

velocity_x는 Flutter에서 플레이어에게 높은 수준의 퍼포먼스를 제공하는 라이브러리입니다. 이 라이브러리는 직관적인 API를 제공하여 UI 개발을 보다 쉽게 만들어줍니다.

프로그래스 애니메이션 만들기

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

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

이제 코드에서 velocity_x 패키지를 임포트하고, 애니메이션을 구현해보겠습니다.

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

class ProgressAnimation extends StatefulWidget {
  @override
  _ProgressAnimationState createState() => _ProgressAnimationState();
}

class _ProgressAnimationState extends State<ProgressAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator()
        .animate(controller: _animationController)
        .p16()
        .px32()
        .p16()
        .px32()
        .p16()
        .px32();
  }
}

위의 코드를 실행하면, 원형 형태의 프로그래스 바가 애니메이션과 함께 회전합니다. 그리고 애니메이션은 1초 동안 반복되며, 역방향으로도 실행됩니다.

이제 위젯을 실행하고 확인해보세요!

결론

이번 글에서는 velocity_x 라이브러리를 사용하여 Flutter 앱에서 간단한 프로그래스 애니메이션을 만드는 방법을 알아보았습니다. velocity_x의 다양한 기능과 API를 사용하면 더욱 다양한 애니메이션을 만들 수 있습니다. 항상 Flutter의 문서와 예제 코드를 참고하면서 앱의 사용성과 시각적인 효과를 향상시키는 애니메이션을 작성해보세요!