Flutter 투명 배경과 함께 플러터 모서리 반경, flutter corner radius with transparent background

질문

아래는 투명 배경을 가진 라운드 코너 컨테이너를 렌더링할 것으로 예상되는 코드입니다.

return new Container(
                //padding: const EdgeInsets.all(32.0),
                height: 800.0,
                //color: const Color(0xffDC1C17),
                //color: const Color(0xffFFAB91),
                decoration: new BoxDecoration(
                  color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
                  borderRadius: new BorderRadius.only(
                    topLeft:  const  Radius.circular(40.0),
                    topRight: const  Radius.circular(40.0))
                ),
                child:  new Container(
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        borderRadius: new BorderRadius.only(
                            topLeft:  const  Radius.circular(40.0),
                            topRight: const  Radius.circular(40.0))
                    ),
                  child: new Center(
                    child: new Text("Hi modal sheet"),
                  )

              ),

하지만 실제로 렌더링되는 것은 흰색 컨테이너(예상대로 투명하지 않음)에 라운드 코너 반지름이 있는 것입니다. 도움이 필요합니다.

답변

만약 부모 요소의 배경 색상을 Colors.transparent로 설정하고 둥근 모서리가 있는 Container를 감싼다면 원하는 대로 표시될 것입니다. 만약 Scaffold를 사용한다면 기본 배경 색상은 흰색입니다. 그것을 Colors.transparent로 변경하면 원하는 대로 표시됩니다.

        new Container(
          height: 300.0,
          color: Colors.transparent,
          child: new Container(
            decoration: new BoxDecoration(
              color: Colors.green,
              borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0),
              )
            ),
            child: new Center(
            child: new Text("Hi modal sheet"),
           )
         ),
        ),