[Flutter]상단에서 내려오는 바텀시트 구현

문제

showModalBottomSheet 함수는 이름에서 알 수 있듯이 바텀 시트를 모달 형태로 보여주는 데 특화되어 있다.
이 함수를 사용하면 화면 하단에서 위로 슬라이드되며 나타나는 바텀 시트를 쉽게 구현할 수 있다.
Flutter의 Material Design 가이드라인에 따라 바텀 시트는 주로 화면 하단에서 슬라이드하여 나타나는 형태로 디자인되었기 때문에, showModalBottomSheet는 이러한 디자인 패턴을 구현하는 데 최적화되어 있다.

반면, 상단에서 내려오는 바텀 시트와 같이 좀 더 커스텀한 동작이나 애니메이션을 구현하고자 할 때는 showGeneralDialog 함수를 사용하는 것이 더 적합해보였다.
showGeneralDialog는 Flutter에서 제공하는 다양한 종류의 다이얼로그를 보여줄 때 사용할 수 있는 범용적인 함수다.
사용자가 직접 다이얼로그의 위치, 모양, 애니메이션, 배경 색상 등을 상세하게 지정할 수 있기 때문에, 표준적인 모달 바텀 시트보다 더 많은 커스터마이징이 가능하다.

상단에서 내려오는 바텀 시트를 구현하기 위해서 showGeneralDialog를 사용하는 이유는 다음과 같다:

애니메이션 커스터마이징:
showGeneralDialog를 사용하면 transitionBuilder 매개변수를 통해 다이얼로그가 나타나고 사라지는 방식에 대한 애니메이션을 자유롭게 정의할 수 있다.
이를 통해 상단에서 내려오는 슬라이드 애니메이션을 구현할 수 있다.

위치 지정: :

showGeneralDialog 내에서 pageBuilder를 사용하여 다이얼로그의 위치와 크기를 정확히 지정할 수 있다.
이를 통해 다이얼로그를 화면 상단에 배치하고, 내려오는 애니메이션과 함께 보여줄 수 있다.

유연성: :

showGeneralDialog는 다양한 커스터마이징 옵션을 제공하여, 디자인 요구사항에 맞춰 다양한 스타일과 동작을 구현할 수 있는 유연성을 제공한다.
이를 통해 표준 바텀 시트 외에도 사용자 경험을 향상시키는 다양한 UI 구성 요소를 만들 수 있다.

예시 코드는 아래와 같다.

void _showTopSearchBottomSheet(BuildContext context) {
  showGeneralDialog(
    barrierLabel: "Barrier",
    barrierDismissible: true,
    barrierColor: Colors.black.withOpacity(0.5),
    transitionDuration: const Duration(milliseconds: 300),
    context: context,
    pageBuilder: (_, __, ___) {
      return Align(
        alignment: Alignment.topCenter,
        child: Material(
          elevation: 10,
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(15),
            bottomRight: Radius.circular(15),
          ),
          child: ClipRRect(
            borderRadius: const BorderRadius.only(
              bottomLeft: Radius.circular(15),
              bottomRight: Radius.circular(15),
            ),
            child: Container(
              height: 200,
              margin: const EdgeInsets.only(top: 50, left: 15, right: 15),
              decoration: const BoxDecoration(
                color: Colors.white,
              ),
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                    child: TextField(
                      autofocus: true,
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                        hintText: '검색',
                        prefixIcon: const Icon(Icons.search),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    },
    transitionBuilder: (_, anim, __, child) {
      return SlideTransition(
        position: Tween(begin: const Offset(0, -1), end: const Offset(0, 0)).animate(anim),
        child: child, 
      );
    },
  );
}

showGeneralDialog에 대해 더 알아보자면 아래 링크를 통해 학습할 수 있다.

https://docs.flutter.dev/release/breaking-changes/scrollable-alert-dialog