[flutter] 메뉴 슬라이드 효과를 위한 클리퍼 애니메이션 구현 방법

05 Dec 2023

flutter

플러터(Flutter)를 사용하여 멋진 메뉴 슬라이드 효과를 구현해보고 싶다면 클리퍼 애니메이션을 사용해볼 수 있습니다. 클리퍼 애니메이션은 위젯을 자르거나 모양을 변경할 수 있는 강력한 기능입니다.

이번 블로그 포스트에서는 플러터에서 메뉴 슬라이드 효과를 구현하기 위해 클리퍼 애니메이션을 어떻게 사용하는지 알아보겠습니다.

1. 클리퍼 애니메이션 클래스 만들기

먼저, 메뉴 슬라이드 효과를 위한 클리퍼 애니메이션 클래스를 만들어야 합니다. 이 클래스는 CustomClipper 클래스를 상속받아야 하며, 메뉴 슬라이드를 위해 원하는 모양에 맞게 path 메소드를 오버라이딩해야 합니다.

import 'package:flutter/material.dart';

class MenuClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    // 원하는 모양에 맞게 path를 그립니다.
    // 예: 왼쪽으로 슬라이드되는 메뉴를 구현하기 위해 path.lineTo(x, y)를 사용합니다.
    // 원하는 모양에 따라 path.moveTo(x, y) 및 curveTo(x1, y1, x2, y2, x, y) 등을 사용할 수 있습니다.
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

2. 클리퍼 애니메이션을 사용해 메뉴 슬라이드 구현하기

이제 앞서 만든 클리퍼 애니메이션을 사용하여 메뉴 슬라이드를 구현해보겠습니다. 예를 들어, 왼쪽으로 슬라이드되는 메뉴를 구현해보겠습니다.

import 'package:flutter/material.dart';

class MenuSlideScreen extends StatefulWidget {
  @override
  _MenuSlideScreenState createState() => _MenuSlideScreenState();
}

class _MenuSlideScreenState extends State<MenuSlideScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('메뉴 슬라이드'),
      ),
      body: AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return Stack(
            children: [
              // 메인 화면
              GestureDetector(
                onTap: () {
                  if (_animationController.isCompleted) {
                    _animationController.reverse();
                  }
                },
                child: Container(
                  color: Colors.white,
                  child: Center(
                    child: Text('메인 화면'),
                  ),
                ),
              ),
              // 슬라이드되는 메뉴
              ClipPath(
                clipper: MenuClipper(),
                child: Container(
                  width: 200,
                  color: Colors.blue,
                  child: Center(
                    child: Text('메뉴'),
                  ),
                ),
              ),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_animationController.isDismissed) {
            _animationController.forward();
          }
        },
        child: Icon(Icons.menu),
      ),
    );
  }

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

위 예제에서는 MenuClipper 클래스를 ClipPath 위젯에 적용하여 슬라이드되는 메뉴의 모양을 결정합니다. AnimationController를 사용하여 애니메이션을 제어하고, AnimatedBuilder를 사용하여 애니메이션을 화면에 반영합니다.

결론

이번 블로그 포스트에서는 플러터에서 메뉴 슬라이드 효과를 구현하기 위해 클리퍼 애니메이션을 사용하는 방법을 살펴보았습니다. 클리퍼 애니메이션을 이용하면 플러터에서 다양한 멋진 애니메이션 효과를 구현할 수 있습니다.

더 많은 플러터 관련 정보를 알고 싶다면 공식 플러터 웹사이트를 확인해보세요: https://flutter.dev/

Happy coding! :rocket: