본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 모달 바텀 시트를 프로그래밍 방식으로 닫는 방법, Close modal bottom sheet programmatically in flutter

by 베타코드 2023. 5. 31.
반응형

질문


저는 showModalBottomSheet<Null>()를 통해 BottomSheet를 표시하고 여러 위젯과 GestureDetector 내부에서 작동합니다. BottomSheet를 바깥쪽을 터치하여 닫는 것뿐만 아니라, GestureDetector 내부의 onTap 이벤트 후에도 닫히기를 원합니다. 그러나 GestureDetector가 터치 이벤트를 전달하지 않는 것 같습니다.

그래서 ModalBottomSheet를 프로그래밍 방식으로 닫거나 GestureDetector가 터치 이벤트를 전달하도록 지시하는 방법이 있는지 궁금합니다.

업데이트 (2018-04-12):

더 잘 이해하기 위해 코드 스니펫을 따릅니다. "아이템 1" 또는 "아이템 2"를 탭할 때 ModalBottomSheet가 닫히지 않는 문제가 있습니다.

showModalBottomSheet<Null>(context: context, builder: (BuildContext context)
{
  return new SingleChildScrollView(child:
    new Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      new GestureDetector(onTap: () { doSomething(); }, child:
        new Text("Item 1")
      ),
      new GestureDetector(onTap: () { doSomething(); }, child:
        new Text("Item 2")
      ),
    ]),
  );
});

답변


모달 바텀 시트를 프로그래밍 방식으로 닫으려면 다음과 같이 수행합니다.

Navigator.pop(context);

그래서 GestureDetector의 onTap 콜백 함수 내에서 해당 팝 함수를 호출하기만 하면 됩니다.

showModalBottomSheet(context: context, builder: (BuildContext context)
{
  return SingleChildScrollView(child:
    Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      GestureDetector(onTap: () {
          Navigator.pop(context);
          doSomething();
        }, child:
        Text("항목 1")
      ),
      GestureDetector(onTap: () {
          Navigator.pop(context);
          doSomething();
        }, child:
        Text("항목 2")
      ),
    ]),
  );
});
반응형

댓글