[flutter] 플러터 BottomSheet 애니메이션 설정하기

14 Dec 2023

flutter

Flutter는 BottomSheet를 사용하여 화면 하단에서 추가적인 콘텐츠를 보여줄 수 있습니다. 기본적으로 BottomSheet는 상승하는 슬라이드 애니메이션을 제공하지만, 사용자 정의 애니메이션을 설정하여 더 많은 효과를 줄 수 있습니다. 이 포스트에서는 Flutter 애플리케이션에서 BottomSheet에 사용자 정의 애니메이션을 설정하는 방법을 살펴보겠습니다.

1. BottomSheet 애니메이션 커스터마이징

BottomSheet를 표시하는 showBottomSheet 함수를 호출할 때, animationController를 설정하여 사용자 정의 애니메이션을 적용할 수 있습니다. 아래의 예제 코드는 BottomSheet에 일반적인 CurvedAnimation을 적용한 예시입니다.

animationController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 500),
);
Animation<double> animation = CurvedAnimation(
  parent: animationController,
  curve: Curves.easeInOut,
);
animationController.forward();

2. BottomSheet 위젯에 애니메이션 적용

showBottomSheet 함수를 호출하여 BottomSheet를 표시하는 코드는 다음과 같습니다.

void _showBottomSheet(BuildContext context) {
  animationController.reset();
  showBottomSheet(
    context: context,
    builder: (context) {
      return AnimatedBuilder(
        animation: animationController,
        builder: (context, child) {
          return Container(
            height: animation.value * 300, 
            // 다른 위젯들과 애니메이션 값에 따른 스타일 변화 등을 작성
          );
        },
      );
    },
  );
}

위 코드에서 AnimatedBuilder를 사용하여 animationController에 따라 BottomSheet의 높이를 조정하고 있습니다.

3. BottomSheet 애니메이션 적용 예시

다음은 BottomSheet에 사용자 정의 애니메이션을 적용한 예시입니다.

void _showCustomBottomSheet(BuildContext context) {
  animationController = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 500),
  );
  Animation<double> animation = CurvedAnimation(
    parent: animationController,
    curve: Curves.easeInOut,
  );
  
  animationController.forward();

  showBottomSheet(
    context: context,
    builder: (context) {
      return AnimatedBuilder(
        animation: animationController,
        builder: (context, child) {
          return Container(
            height: animation.value * 300, 
            // 다른 위젯들과 애니메이션 값에 따른 스타일 변화 등을 작성
          );
        },
      );
    },
  );
}

위의 코드를 사용하여 BottomSheet에 적절한 애니메이션을 적용할 수 있습니다.

BottomSheet에 애니메이션을 적용한다면 앱의 사용자 경험을 향상시킬 수 있어서, 앱의 디자인과 상호작용에 더 많은 가능성을 제공할 수 있습니다. Flutter에서 BottomSheet를 사용하는 데 표시 애니메이션을 커스터마이징 하는 방법에 대한 이해는 앱의 인터랙티브한 부분을 개선하는 데 도움이 될 것입니다.

이후에는 애니메이션 컨트롤러를 이용하여 다양한 애니메이션 효과를 적용하거나, Floating Action Button과 같은 다른 위젯과의 상호작용에 활용할 수 있을 것입니다.

참고자료:

이상으로 해당 내용에 대한 개략적인 이해를 나타내는 예시 코드를 작성해보았습니다. 부족한 부분이 있거나 추가적인 내용이 필요하시다면 알려주세요.