BottomSheet 위젯 소개

Flutter에서 BottomSheet는 화면 아래에서 상위 위젯에 대한 작은 시트를 제공합니다. 이를 사용하여 메뉴, 알림, 설정 등을 표시할 수 있습니다.

드래그 제스처 처리

BottomSheet는 기본적으로 드래그 제스처를 사용하여 닫을 수 있습니다. 그러나 경우에 따라 사용자가 드래그 했을 때의 제스처에 대해 추가적인 제어를 원할 수 있습니다. 이를 처리하는 방법에 대해 알아보겠습니다.

드래그 제스처 감지

Flutter는 GestureDetector 위젯을 사용하여 다양한 제스처 이벤트를 처리할 수 있습니다. BottomSheet 위젯이 화면 아래로 드래그될 때의 이벤트를 감지하고 처리하기 위해 GestureDetector를 사용할 수 있습니다.

다음은 BottomSheet를 드래그할 때 이벤트를 감지하고 출력하는 예제 코드입니다.

  GestureDetector(
    onVerticalDragUpdate: (details) {
      print('Drag position: ${details.globalPosition}');
    },
    child: BottomSheet(
      onClosing: () {},
      builder: (BuildContext context) {
        return Container(
          height: 200,
          child: Text('Your bottom sheet content'),
        );
      },
    ),
  ),

드래그 제스처에 대한 추가적인 제어

사용자가 BottomSheet를 드래그하면 이동 거리, 속도, 방향 등에 따라 추가적인 제어를 원할 수 있습니다. 이 경우, DraggableScrollableSheet 위젯을 사용하여 더 세밀한 제어를 할 수 있습니다.

다음은 DraggableScrollableSheet 위젯을 사용하여 드래그 이벤트를 처리하는 예제 코드입니다.

  DraggableScrollableSheet(
    initialChildSize: 0.5,
    minChildSize: 0.25,
    maxChildSize: 0.75,
    builder: (BuildContext context, ScrollController scrollController) {
      return SingleChildScrollView(
        controller: scrollController,
        child: Container(
          height: 200,
          child: Text('Your draggable bottom sheet content'),
        ),
      );
    },
  ),

결론

Flutter에서 BottomSheet의 드래그 제스처에 대한 처리는 GestureDetector 또는 DraggableScrollableSheet를 사용하여 감지하고 추가적인 제어를 할 수 있습니다. 이를 통해 사용자 경험을 더욱 향상시킬 수 있습니다.

참고 자료