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

05 Dec 2023

flutter

이번 글에서는 Flutter에서 Velocity_X 패키지를 사용하여 카운트다운 애니메이션을 만드는 방법에 대해 알아보겠습니다.

Velocity_X란?

Velocity_X는 Flutter에서 사용할 수 있는 강력한 도구로, 애니메이션을 쉽게 생성하고 제어할 수 있도록 도와줍니다. Flutter Widget 트리에서 원하는 속성을 선택하고 애니메이션을 적용하는 데 매우 유용합니다.

이제 Velocity_X를 사용하여 카운트다운 애니메이션을 만들어보겠습니다.

시작하기 전에

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

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

의존성을 추가한 후에는 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

카운트다운 애니메이션 구현

먼저, 카운트다운 애니메이션을 위한 StatefulWidget을 생성합니다.

import 'dart:async';

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

class CountdownAnimation extends StatefulWidget {
  @override
  _CountdownAnimationState createState() => _CountdownAnimationState();
}

class _CountdownAnimationState extends State<CountdownAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  int _countdown = 10;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat(reverse: true);

    Timer.periodic(const Duration(seconds: 1), (Timer timer) {
      setState(() {
        if (_countdown > 0) {
          _countdown--;
        } else {
          timer.cancel();
        }
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Countdown Animation'),
      ),
      body: Center(
        child: VStack([
          '$_countdown'.text
              .xl5
              .bold
              .color(Colors.blue)
              .make(), // Velocity_X를 사용하여 스타일과 애니메이션을 적용합니다.
          SizedBox(height: 20),
          CircularProgressIndicator().scale(2).centered(), // 원하는 다른 위젯과 함께 애니메이션을 적용할 수 있습니다.
        ]),
      ),
    );
  }
}

여기서 중요한 점은 _countdown 변수의 값이 변경될 때마다 setState() 메서드를 호출하여 위젯 트리를 다시 렌더링해야 한다는 것입니다.

마지막으로, 위젯을 실행하는 메인 함수에 CountdownAnimation 위젯을 추가합니다.

void main() {
  runApp(MaterialApp(
    home: CountdownAnimation(),
  ));
}

이제 앱을 실행하면 카운트다운 애니메이션이 작동하는 것을 확인할 수 있습니다.

결론

Velocity_X를 사용하면 Flutter에서 간단하고 효과적인 애니메이션을 생성할 수 있습니다. 위에서 설명한 방법을 사용하여 카운트다운 애니메이션을 만드는 데 도움이 되길 바랍니다.

더 자세한 내용은 Velocity_X 공식 문서를 참조하세요.