[flutter] 플러터 슬라이딩 패널 애니메이션 효과

플러터에는 화면에서 패널을 슬라이드하여 표시하는 애니메이션 효과를 구현할 수 있는 다양한 방법이 있습니다. 이번 글에서는 플러터의 AnimatedContainer와 SlideTransition을 이용하여 슬라이딩 패널 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

1. AnimatedContainer를 사용한 슬라이딩 패널

import 'package:flutter/material.dart';

class SlidingPanel extends StatefulWidget {
  @override
  _SlidingPanelState createState() => _SlidingPanelState();
}

class _SlidingPanelState extends State<SlidingPanel> {
  bool _isOpen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널'),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('패널 열기'),
            onPressed: () {
              setState(() {
                _isOpen = true;
              });
            },
          ),
          AnimatedContainer(
            duration: Duration(milliseconds: 300),
            height: _isOpen ? 200 : 0, // 슬라이딩 패널의 높이를 조절하여 애니메이션 효과를 구현합니다
            color: Colors.blue,
            child: Text('슬라이딩 패널 내용'),
          ),
        ],
      ),
    );
  }
}

위 예제 코드는 AnimatedContainer 위젯을 사용하여 슬라이딩 패널의 애니메이션 효과를 구현한 예시입니다. 패널을 열기 위해 RaisedButton을 클릭하면 _isOpen 변수의 값을 변경하여 애니메이션을 트리거합니다. _isOpen 변수가 true이면 패널의 높이가 200으로 설정되어 패널이 화면에 보여지고, false이면 높이가 0으로 줄어들어 패널이 화면에서 사라집니다.

2. SlideTransition를 사용한 슬라이딩 패널

import 'package:flutter/material.dart';

class SlidingPanel extends StatefulWidget {
  @override
  _SlidingPanelState createState() => _SlidingPanelState();
}

class _SlidingPanelState extends State<SlidingPanel> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _isOpen = false;

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

    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널'),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('패널 열기'),
            onPressed: () {
              setState(() {
                _isOpen = !_isOpen; // 패널 상태를 토글합니다
                if (_isOpen) {
                  _controller.forward(); // 애니메이션을 시작합니다
                } else {
                  _controller.reverse(); // 애니메이션을 역재생합니다
                }
              });
            },
          ),
          SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(0, -1),
              end: Offset.zero,
            ).animate(_controller),
            child: Container(
              height: 200,
              color: Colors.blue,
              child: Text('슬라이딩 패널 내용'),
            ),
          ),
        ],
      ),
    );
  }
}

위 예제 코드는 SlideTransition을 사용하여 슬라이딩 패널의 애니메이션 효과를 구현한 예시입니다. 패널을 열기 위해 RaisedButton을 클릭하면 _isOpen 변수를 토글하여 애니메이션을 시작하거나 역재생합니다. SlideTransition 위젯의 position 속성을 이용해 패널을 위에서 아래로 슬라이드하는 애니메이션을 적용합니다.

이러한 방법을 통해 플러터에서 슬라이딩 패널 애니메이션 효과를 구현할 수 있습니다. 필요에 따라 AnimatedContainer 또는 SlideTransition을 선택하여 사용하면 됩니다.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.