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

05 Dec 2023

flutter

Flutter는 UI 개발에 매우 효율적이며 인기 있는 프레임워크입니다. velocity_x 패키지는 간단하면서도 강력한 UI 빌딩을 위한 툴킷으로, 메뉴 바 애니메이션을 만드는 데 사용할 수 있습니다. velocity_x는 Flutter의 신속한 UI 작업을 지원하는 많은 확장 기능을 제공합니다.

velocity_x 패키지 추가하기

먼저, 프로젝트의 pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가하고 flutter pub get을 실행하여 패키지를 다운로드합니다.

dependencies:
  flutter:
    sdk: flutter

  velocity_x: ^1.2.0

메뉴 바 애니메이션 구현하기

velocity_x의 힘을 빌려 메뉴 바 애니메이션을 만들어 보겠습니다. 아래는 기본적인 메뉴 바가 열리고 닫히는 애니메이션을 구현하는 예시입니다.

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

class MenuScreen extends StatefulWidget {
  @override
  _MenuScreenState createState() => _MenuScreenState();
}

class _MenuScreenState extends State<MenuScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  bool _menuOpen = false;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: VxBox(
          child: IconButton(
            icon: AnimatedIcon(
              icon: AnimatedIcons.menu_close,
              progress: _animationController,
            ),
            onPressed: () {
              setState(() {
                _menuOpen = !_menuOpen;
              });
              _menuOpen
                  ? _animationController.forward()
                  : _animationController.reverse();
            },
          ),
        ).height(50).width(50).paddingAll(10).make(),
      ),
      body: Container(
        // 메뉴 바의 내용을 추가하세요
      ),
    );
  }
}

위 코드에서는 AnimationController를 사용하여 애니메이션 제어를 위한 컨트롤러를 생성하고, IconButton을 눌렀을 때 _menuOpen 상태를 변경하고 애니메이션을 시작합니다.

메뉴 바의 내용은 body 위젯 내에 추가하시면 됩니다.

결론

Flutter의 velocity_x 패키지는 매우 효율적인 UI 작업을 위한 도구로서 다양한 기능을 제공합니다. 위 예제를 참고하여 메뉴 바 애니메이션을 구현해 보세요. Happy coding!

참고자료

velocity_x 패키지