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

05 Dec 2023

flutter

velocity_x는 Flutter에서 사용할 수 있는 기능을 제공하는 유용한 패키지입니다. 이 패키지의 도움을 받아 헤더 애니메이션을 쉽게 만들 수 있습니다. 이번 블로그 포스트에서는 velocity_x를 사용하여 헤더 애니메이션을 만드는 방법을 알아보겠습니다.

1. velocity_x 패키지 추가하기

우선, 프로젝트의 pubspec.yaml 파일에 velocity_x를 추가해야 합니다. 아래와 같이 dependencies에 velocity_x를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

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

2. 헤더 위젯 만들기

헤더 애니메이션을 만들기 위해 먼저 헤더 위젯을 만들어야 합니다. 아래와 같이 StatelessWidget을 상속하는 HeaderWidget을 만들어보겠습니다.

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

class HeaderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 'Header'.text.xl4.bold.white.make().p16().px20().py12().box.roundedLg.blue600.make();
  }
}

위 코드에서 text는 velocity_x에서 제공하는 텍스트 위젯 확장입니다. 그리고 make 메서드를 사용해서 최종적으로 위젯을 생성합니다.

3. 헤더 애니메이션 적용하기

이제 헤더 애니메이션을 적용해보겠습니다. 아래와 같이 StatefulWidget을 상속하는 HeaderAnimationWidget을 만들고, initState 메서드에서 애니메이션을 설정합니다.

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

class HeaderAnimationWidget extends StatefulWidget {
  @override
  _HeaderAnimationWidgetState createState() => _HeaderAnimationWidgetState();
}

class _HeaderAnimationWidgetState extends State<HeaderAnimationWidget> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Alignment> _animation;

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

    _animationController = AnimationController(
      vsync: this, // 상위 위젯의 vsync 프로퍼티를 사용하여 애니메이션을 동기화합니다.
      duration: Duration(seconds: 1),
    );

    _animation = AlignmentTween(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ).animate(_animationController);

    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Align(
          alignment: _animation.value,
          child: child,
        );
      },
      child: HeaderWidget(),
    );
  }
}

위 코드에서는 AlignmentTween을 사용하여 애니메이션의 시작과 끝 위치를 정의하고, AnimatedBuilder를 사용하여 alignment 프로퍼티에 애니메이션 값을 할당합니다.

4. 헤더 애니메이션 사용하기

마지막으로, 헤더 애니메이션을 사용하는 방법을 알아보겠습니다. 아래와 같이 MyApp 위젯에서 HeaderAnimationWidget을 사용합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: HeaderAnimationWidget(),
        ),
      ),
    );
  }
}

위 코드에서는 MaterialApp 안에서 HeaderAnimationWidget을 사용하고, Scaffold의 body에 배치합니다.

이제 앱을 실행하면 헤더 위젯이 애니메이션과 함께 움직이는 것을 확인할 수 있습니다.

마치며

velocity_x 패키지를 사용하여 Flutter 앱의 헤더 애니메이션을 만드는 방법을 알아보았습니다. velocity_x는 유용한 기능을 많이 제공하므로, 다양한 애니메이션 및 UI 효과를 구현하는 데 활용할 수 있습니다.

참고자료: