Flutter Dialog 요소들 배경 투명하게 만들기

Flutter로 개발하다보면 아래 사진과 같은 UI를 개발할 때가 있을 것이다.

그런데 버튼이 2개인데 배경을 어떻게 투명하게 할까? 라는 어려움이 있어 이를 해결하였던 글을 써보았다. 

그래서 이를 해결하기 위해 코드를 넣었다..! 

backgroundColor 를 아무리 투명으로 해도 색이 있었는데 표면의 색을 투명하게 하기 위해서는 backgroundColor을 사용하는 것이 아니었다..! surfaceTintColor도 추가하여 투명으로 두어야한다.

Dialog(
    // 다이얼로그의 표면 색상을 설정합니다. 투명도로 설정하기 위해 Colors.transparent와 withOpacity(0.0)을 사용합니다.
    surfaceTintColor: Colors.transparent.withOpacity(0.0),
    
    // 다이얼로그의 배경 색상을 설정합니다. 투명도로 설정하기 위해 Colors.transparent와 withOpacity(0.0)을 사용합니다.
    backgroundColor: Colors.transparent.withOpacity(0.0),
    
    // 다이얼로그의 자식 위젯을 설정합니다. Align 위젯을 사용하여 정렬을 지정합니다.
    child: Align(
        // Align 위젯의 정렬 위치를 화면의 아래쪽 중앙으로 설정합니다.
        alignment: Alignment.bottomCenter,
        
        // 여기에 자식 위젯을 추가할 수 있습니다.
        child: Container( // 예시로 Container를 추가했습니다.
            width: 300,
            height: 200,
            color: Colors.blue, // 배경 색상을 파란색으로 설정했습니다.
            child: Center(
                child: Text(
                    "This is a dialog",
                    style: TextStyle(color: Colors.white),
                ),
            ),
        ),
    ),
);