[Flutter] Animation_01

애니메이션 효과를 간단하게 주는 방법 중 슬라이딩 하는 SlideTransition에 대해서 메모!
먼저 애니메이션 컨트롤러를 선언한다. 변환 하는 시간은 200 milliseconds로 설정.

late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 200),
  );

그리고 얼마만큼 슬라이딩을 할 지 화면의 시작과 끝 비율(0~1 == 0%~100%)을 정하고 컨트롤러도 지정해준다.

late final Animation<Offset> _panelAnimation =
      Tween(begin: const Offset(0, -1), end: Offset.zero)
          .animate(_animationController);

해당 Animation효과를 준 위젯을 컨트롤러를 이용하여 _panelAnimation에서 설정한 값대로 진행(forward)하고 되감(reverse)을 수 있도록 onTap함수를 만든다.

void _onTitleTap() {
    if (_animationController.isCompleted) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
  }

position에 _panelAnimation만큼 위치를 변경할 수 있도록 넣어주면, 이전 포스팅 Animation_00에서의 onTap함수에 의해 _animationController가 갱신 될 시 SlideTransition이 진행(forward)되거나 되감(reverse)아진다.

SlideTransition(
            position: _panelAnimation,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(Sizes.size5),
                  bottomRight: Radius.circular(Sizes.size5),
                ),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  for (var tab in _tabs)
                    ListTile(
                      title: Row(
                        children: [
                          FaIcon(
                            tab['icon'],
                            color: Colors.black,
                            size: Sizes.size16,
                          ),
                          Gaps.h20,
                          Text(
                            tab['title'],
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                    ),
                ],
              ),
            ),
          ),