중첩된 다이얼로그 위에 스낵바 보여주기

참고

1번 탭 스크린 화면에서 카드를 클릭하면

카드의 상세를 보여주는 다이얼로그를 띄우고

카드 상세 다이얼로그에서 댓글 버튼을 클릭하면

댓글 리스트 다이얼로그를 띄워준다

 

그리고 특정 댓글의 삭제 버튼을 클릭하면

댓글 삭제 요청 결과를 스낵바에서 띄워줘야 한다

그런데 스낵바가 맨 위의 다이얼로그,

그러니까 댓글 리스트 다이얼로그가 아니라 그 밑에 보였다

 

ScaffoldMessenger.of(context)를 쓰면 context를 이용해

위젯 트리 상단의 Scaffold Messenger를 찾아낸다.

이 Scaffold Messenger는 MaterialApp 내부에 위치해 있다. 

위젯 트리를 올라가다가 만나는 scaffold messenger 위에 스낵바를 보여준다

 

alert 다이얼로그에서 ScaffoldMessenger.of(context).showSnackBar(); 를 호출하면

alert 다이얼로그의 부모인 스카폴드 메신저는 alert 다이얼로그 뒤에 있는데

스낵바는 바로 그 스카폴드 메신저에 뜨게 된다

 

이를 해결하기 위해서는 alert 다이얼로그를 스카폴드로 만들면 된다

showDialog 메소드의 바디에 스카폴드와 alert 다이얼로그 두 개를 다 넣어줘야 한다

showDialog(
    context: context,
    builder: (context) {
        return ScaffoldMessenger(
        	child: Builder(builder: (context) {
            	return Scaffold(
                	backgroundColor: Colors.transparent,
                    body: AlertDialog(
                        title: Text("댓글을 삭제하시겠습니까?"),
                        actions: [
                            ElevatedButton(
                                onPressed: () {
                                    ScaffoldMessenger.of(context).showSnackBar(
                                        const SnackBar(
                                            content: Text("댓글이 삭제되었습니다"),
                                        )
                                    );
                                },
                                child: Text("네"),
                            )
                        ],
                    ),
                );
            }),
        );
    },
);

 

스카폴드 메신저가 중첩이 되면 스낵바가 두 개 만들어질 수 있기 때문에

두번째 스카폴드 메신저의 BuildContext를 첫번째와 다르게 만들어서 스낵바가 두 개 생기지 않게 만든다

스카폴드메신저의 배경색을 투명으로 지정하지 않으면 뒤가 보이지 않아 오버레이처럼 보이지 않는다.