[Flutter] showDialog에 대하여 (feat. CupertinoAlertDialog)

- 개요

최근, 앱 개발을 진행하던 중 Dialog 제어에 대한 궁금점과 불편함을 겪었는데요,

그건 바로, 다이얼로그 외부 백그라운드를 클릭시 다이얼로그가 자동으로 꺼진다는점

그때, 이벤트 제어를 어떻게 해야할까에 대한점입니다.

아래 예제 코드와 함께 살펴보시죠.

 

Positive, Negative Action을 모두 가진 다이얼로그

 

위의 사진처럼, 확인과 취소 즉 긍정과 부정의 행동을 둘다 가진 다이얼로그의 경우엔

showDialog(
	  barrierDismissible: false,
          context: context,
          builder: (_) {
            return CupertinoAlertDialog(
              content:
              Text('아이디와 비밀번호를 입력해 주세요.',
                  style: TextStyle(
                    fontFamily:
                    'NanumSquareR',
                    color: Color.fromRGBO(
                        0, 0, 0, 1),
                    fontSize: 14,
                  )),
              actions: [
                CupertinoDialogAction(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    '확인',
                    style: TextStyle(
                      fontFamily:
                      'NanumSquareR',
                      color: Color.fromRGBO(
                          16, 37, 231, 1),
                      fontSize: 16,
                    ),
                  ),
                ),
                CupertinoDialogAction(
                  onPressed: () {
                    Navigator.of(context).pop<bool>(true);
                  },
                  child: Text(
                    '취소',
                    style: TextStyle(
                      fontFamily:
                      'NanumSquareR',
                      color: Color.fromRGBO(231, 26, 16, 1),
                      fontSize: 16,
                    ),
                  ),
                )
              ],
            );
          });

 

showDialog 의 barrierDismissible attribute 값으로 제어를 하여, Background 클릭 시 다이얼로그가

자동으로 닫히지 않게 제어해줄 수 있습니다.

하지만, 여기서 우리는 취소버튼을 따로 두지 않고 사용자에게 백그라운드 클릭으로

다이얼로그를 닫을 수 있는 자유도를 뺏고 싶지 않다면 어떻게 해야 할까요?

 

showDialog(
    context: context,
    builder: (_) {
      return CupertinoAlertDialog(
        content:
        Text('아이디와 비밀번호를 입력해 주세요.',
            style: TextStyle(
              fontFamily:
              'NanumSquareR',
              color: Color.fromRGBO(
                  0, 0, 0, 1),
              fontSize: 14,
            )),
        actions: [
          CupertinoDialogAction(
            onPressed: () {
              Navigator.of(context).pop<bool>(true);
            },
            child: Text(
              '확인',
              style: TextStyle(
                fontFamily:
                'NanumSquareR',
                color: Color.fromRGBO(
                    16, 37, 231, 1),
                fontSize: 16,
              ),
            ),
          ),
        ],
      );
    }).then((value) {
      if(value == null) {
        print('백그라운드 클릭함');
        return;
      }
      if(value) {
        print('확인 버튼 클릭');
      } else {
        print('닫기 버튼 클릭');
      }
});

 

바로, 위와같이 해결할 수 있습니다. Navigator.of(context).pop(); 으로 다이얼로그 창을 닫아줄때

인자값을 넘김으로써 .then((arg) {}); 으로 익명함수 혹은 함수를 정의하여 처리 해줄 수 있는것이죠.

아래에선 실제 화면을 보고 마무리 하도록 하겠습니다.

 

취소 버튼이 별도로 없으며, 백그라운드 클릭시 닫히는 다이얼로그

 

 

테스트 결과, 백그라운드를 클릭하여 모달창을 닫았을때에 대한 이벤트 제어를 할 수 있음을 확인 할 수 있었습니다.