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

05 Dec 2023

flutter

알림 애니메이션은 사용자에게 정보를 시각적으로 전달하는 중요한 요소입니다. Flutter에서는 velocity_x 패키지를 사용하여 알림 애니메이션을 쉽게 만들 수 있습니다. velocity_x는 트위치와 같은 유명한 앱에서 사용되는 UI/UX 패턴을 플러터에서 구현하는 데 도움이 되는 패키지입니다.

velocity_x 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

Dependencies를 추가한 후 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치합니다.

알림 애니메이션 만들기

velocity_x의 애니메이션을 사용하여 알림 애니메이션을 만들어 봅시다.

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

class NotificationAnimation extends StatefulWidget {
  @override
  _NotificationAnimationState createState() => _NotificationAnimationState();
}

class _NotificationAnimationState extends State<NotificationAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _controller.forward().then((value) => _controller.reverse());
      },
      child: VxNotification(
        child: Container(
          width: 200,
          height: 50,
          color: Colors.blue,
          child: Center(
            child: Text(
              '알림 애니메이션',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
          ),
        ),
        showShadow: true,
        shadowColor: Colors.black.withOpacity(0.5),
        animate: VxAnimation.defaultNotification,
        endDraggable: true,
        startPosition: VxPosition.top,
        endPosition: VxPosition.bottom,
        onEndDrag: () {
          _controller.reverse();
        },
        controller: _controller,
      ),
    );
  }
}

위의 예제 코드에서는 _controller를 사용하여 애니메이션을 제어하고, VxNotification을 사용하여 알림 애니메이션을 생성합니다. VxNotification으로 감싸진 Container 위를 탭할 때, _controller.forward()를 사용하여 애니메이션을 시작하고 _controller.reverse()를 사용하여 애니메이션을 되돌립니다.

알림 애니메이션의 효과를 변경하려면 VxAnimation의 속성을 사용하면 됩니다. 위의 예제에서는 VxAnimation.defaultNotification을 사용하였습니다.

마무리

velocity_x를 사용하여 알림 애니메이션을 만드는 방법에 대해 알아보았습니다. velocity_x는 Flutter 앱에서 유용한 애니메이션 및 UI/UX 패턴을 구현하는 데 도움을 줍니다. 알림 애니메이션을 개발할 때 velocity_x를 사용하면 매우 쉽게 구현할 수 있습니다.

더 자세한 내용은 velocity_x GitHub 저장소를 참조하십시오.