[flutter] BottomSheet 상태 변화 감지하는 방법

14 Dec 2023

flutter

Flutter에서 BottomSheet를 사용할 때, BottomSheet의 상태 변화를 감지하여 그에 따라 작업을 수행해야 하는 경우가 있습니다. 예를 들어, BottomSheet가 화면에 표시되는지 여부를 확인하거나, BottomSheet가 슬라이딩 되는 동안의 상태를 감지해야 할 수 있습니다. 이 글에서는 Flutter 앱에서 BottomSheet의 상태 변화를 감지하는 방법에 대해 살펴보겠습니다.

1. BottomSheet 상태 변화 감지하기

BottomSheet의 상태 변화를 감지하려면, StatefulWidget을 사용하여 BottomSheet를 관리해야 합니다. 이후 showModalBottomSheet 메서드를 호출하고, BottomSheet의 상태 변화를 감지하기 위한 PersistentBottomSheetController를 얻어야 합니다.

PersistentBottomSheetController controller = showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      child: Text('BottomSheet 내용'),
    );
  }
);

controller.closed.then((value) {
  // BottomSheet가 닫혔을 때의 작업 수행
});

controller.closed.whenComplete(() {
  // BottomSheet가 완전히 닫힌 후의 작업 수행
});

위 예제에서 controller.closed를 사용하여 BottomSheet가 닫혔을 때의 작업을 수행할 수 있습니다.

2. BottomSheet 상태를 상태 관리 클래스로 분리하기

BottomSheet의 상태 변화를 감지하는 로직을 별도의 상태 관리 클래스로 분리하여 관리하는 것이 좋습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

class BottomSheetManager {
  PersistentBottomSheetController _controller;

  void showBottomSheet(BuildContext context) {
    _controller = showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          child: Text('BottomSheet 내용'),
        );
      }
    );

    _controller.closed.then((value) {
      // BottomSheet가 닫혔을 때의 작업 수행
    });
  }
}

위 예제에서 showBottomSheet 메서드를 호출하여 BottomSheet를 표시하고, 그에 따른 상태 변화를 감지하고 처리하는 로직을 BottomSheetManager 클래스로 분리하였습니다.

결론

Flutter 앱에서 BottomSheet의 상태 변화를 감지하여 처리하는 방법에 대해 알아보았습니다. BottomSheet가 닫힐 때의 작업을 수행하거나, BottomSheet의 상태를 외부 클래스로 분리하여 관리함으로써 코드를 깔끔하게 유지할 수 있습니다. BottomSheet를 사용하는 앱을 개발할 때 이러한 점을 참고하여 효율적으로 상태를 관리하고 처리하시기 바랍니다.

1. BottomSheet 상태 변화 감지하기

2. BottomSheet 상태를 상태 관리 클래스로 분리하기

결론

참고 자료