원래의 Flutter BottomSheet 위젯은 기본 slide 애니메이션만을 제공합니다. 하지만 사용자 정의 애니메이션을 추가해야 하는 경우도 있을 것입니다. 이 블로그에서는 Flutter의 BottomSheet에 사용자 정의 애니메이션을 추가하는 방법을 알아보겠습니다.

BottomSheet란 무엇인가?

Flutter에서 BottomSheet는 화면 하단에서 위로 올라오는 모달 시트를 나타냅니다. 일반적으로는 showModalBottomSheet 메서드를 사용하여 화면에 보여줍니다. 기본적으로 slide 애니메이션이 적용되어 하단에서 위로 올라오는 애니메이션이 구현됩니다.

BottomSheet에 사용자 정의 애니메이션 추가하기

사용자 정의 애니메이션을 추가하기 위해서는 showModalBottomSheet 메서드를 사용하여 builder 속성에 사용자 정의 위젯을 렌더링하는 함수를 지정해야 합니다. 해당 함수에서는 원하는 애니메이션을 적용한 후, BottomSheet를 반환해주어야 합니다.

다음은 showModalBottomSheet 메서드를 사용하여 사용자 정의 애니메이션을 추가하는 예제 코드입니다.

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.6,
      minChildSize: 0.4,
      maxChildSize: 0.9,
      expand: false,
      builder: (BuildContext context, ScrollController scrollController) {
        return AnimatedContainer(
          duration: Duration(milliseconds: 300),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.0),
              topRight: Radius.circular(16.0),
            ),
          ),
          child: ListView(
            controller: scrollController,
            children: <Widget>[
              // 사용자 정의 내용 추가
            ],
          ),
        );
      },
    );
  },
);

위 코드에서는 showModalBottomSheet 메서드의 builder 속성으로 DraggableScrollableSheet를 사용하고, 그 안에서 원하는 애니메이션을 적용한 위젯을 반환하는 방식으로 사용자 정의 애니메이션을 추가하고 있습니다.

마무리

Flutter의 BottomSheet에 사용자 정의 애니메이션을 추가하는 방법에 대해 알아보았습니다. 이를 통해 기본 제공되는 애니메이션이 아닌 사용자 정의한 애니메이션을 적용할 수 있게 되었습니다.

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