ModalBarrier 활용하기

[ModalBarrier 클래스]

사용자가 현재 보는 위젯 뒤에 있는 다른 위젯과 상호 작용하지 못하도록 하는 위젯이다. 

모달베리어는 각 경로 뒤에 랜더링 되는 스크린이라 사용자가 뒷 스크린과 상호작용하지 못하도록 한다. 

 

[사용]

 ModalBarrier(
            dismissible: false,
            color: Colors.black.withOpacity(0.0),
          ),

 

[전체적인 코드]

AlertDialog 를 띄우고 api 가 통신 되는 동안 뒷 배경을 클릭하여 다른 동작을 하지 못하게끔 ModalBarrier 를 이용하여 막아 놓는다. 그렇게 하면 아무리 눌러도 이상이 없지롱 ... 

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AlertDialog(
          contentPadding: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          content: Container(
            width: 280,
            height: 200,
            padding: EdgeInsets.symmetric(horizontal: 20),
            decoration: BoxDecoration(
              color: Color(0xFFE6E2DB),
              borderRadius: BorderRadius.circular(16),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SvgPicture.asset(
                  'assets/icons/main_menu/main_menu_icon.svg',
                  width: 48.0,
                  height: 48.0,
                ),
                SizedBox(height: 24.0),
                const Text(
                  '테마를 변경 중 입니다. \n 잠시만 기다려주세요',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'KoPubBatangPro',
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ),
        ),
        if (_isProcessing)
          //화면 아무것도 못하게 막기
          ModalBarrier(
            dismissible: false,
            color: Colors.black.withOpacity(0.0),
          ),
      ],
    );
  }
}