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

05 Dec 2023

flutter

이번 튜토리얼에서는 Flutter에서 velocity_x 패키지를 사용하여 알람 애니메이션을 만드는 방법에 대해 알아보겠습니다. velocity_x는 Flutter 앱 개발을 더욱 쉽고 빠르게 만들어주는 도구 모음입니다. 알람 애니메이션을 생성하기 위해여 이 패키지를 사용해보겠습니다.

1. velocity_x 패키지 추가하기

먼저, 알람 애니메이션을 생성하기 위해 velocity_x 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 velocity_x 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^2.0.0

패키지를 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 다운로드합니다.

2. 알람 애니메이션 만들기

이제 알람 애니메이션을 만들 차례입니다. 먼저, 애니메이션이 포함될 위젯을 생성합니다. 이 예시에서는 알람 아이콘이 포함된 컨테이너를 생성하겠습니다.

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

class AlarmWidget extends StatefulWidget {
  @override
  _AlarmWidgetState createState() => _AlarmWidgetState();
}

class _AlarmWidgetState extends State<AlarmWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.isCompleted) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      },
      child: Container(
        width: 50.0,
        height: 50.0,
        color: Colors.yellow,
        child: Icon(
          Icons.alarm,
        ),
      ).animate(
        _controller,
      ),
    );
  }
}

위의 코드에서 주목해야 할 부분은 _controller 변수와 애니메이션을 적용할 위젯입니다.

_controller 변수를 사용하여 애니메이션을 제어하고, onTap 이벤트를 사용하여 애니메이션을 시작하거나 정지합니다. 위젯의 컨테이너에 animate 메서드를 사용하여 애니메이션을 적용합니다.

3. 애니메이션 사용하기

마지막으로, 위젯을 화면에 표시하고 애니메이션을 사용할 준비가 끝났습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Alarm Animation'),
        ),
        body: Center(
          child: AlarmWidget(),
        ),
      ),
    );
  }
}

main 함수에서는 MyApp 위젯을 실행하여 앱을 시작하고, MyApp 위젯에서는 AlarmWidget을 화면 중앙에 표시합니다.

이제 앱을 실행하고 알람 아이콘을 탭하여 애니메이션을 확인할 수 있습니다.

결론

이제 Flutter의 velocity_x 패키지를 사용하여 알람 애니메이션을 만드는 방법을 알아보았습니다. velocity_x의 강력한 기능을 활용하여 다양한 유형의 애니메이션을 만들 수 있습니다. 추가로 더 복잡한 애니메이션을 만들고 싶다면, velocity_x 패키지의 문서와 예제를 참조해보세요.

참고 자료: