[flutter] BottomSheet를 특정 위치로 이동시키는 방법

14 Dec 2023

flutter

모바일 앱을 개발하는 과정에서 사용자 경험을 향상시키기 위해 BottomSheet를 사용하는 경우가 많습니다. 하지만 기본적으로 BottomSheet는 화면 아래에 고정되어 표시됩니다. 만약 BottomSheet를 특정 위치로 이동시키고 싶다면 어떻게 해야 할까요?

1. Custom BottomSheet 구현하기

우선 BottomSheet를 특정 위치로 이동시키기 위해서는 기본 제공되는 BottomSheet가 아닌 Custom BottomSheet를 구현해야 합니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Text('Custom BottomSheet'),
    );
  },
);

2. BottomSheet 위치 조정

Custom BottomSheet를 구현했다면, 이제 원하는 위치에 BottomSheet를 표시할 수 있습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.5,
      minChildSize: 0.25,
      maxChildSize: 0.8,
      expand: false,
      builder: (context, scrollController) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
          ),
          child: SingleChildScrollView(
            controller: scrollController,
            child: Column(
              children: [
                // BottomSheet 내용
              ],
            ),
          ),
        );
      },
    );
  },
);

위 예제에서 DraggableScrollableSheet 위젯을 사용하여 BottomSheet를 표시하고 initialChildSize와 minChildSize, maxChildSize 속성을 조정하여 원하는 위치에 표시할 수 있습니다.

이렇게 하면 기본 BottomSheet와 달리 특정 위치에 BottomSheet를 표시할 수 있습니다.

이상으로 Flutter에서 BottomSheet를 특정 위치로 이동시키는 방법에 대해 알아보았습니다.

더 자세한 정보는 Flutter 공식 문서를 참고하시기 바랍니다.