Flutter - Container에 Decoration borderRadius 가 적용되지 않을 때 (ClipRRect)

Drawer를 child로 갖고있는 Container의 모퉁이를 둥글게 바꾸는 게 아주 간단할 줄 알았으나,

Decoration으로 어떤 위젯을 감싸도 모퉁이가 둥글게되지 않아 찾아본 결과,,,

 

Decoration은 child 위젯의 뒤에 그려진다는 것을 알게되었다.

결국 Container에 borderRadius가 잘 반영이 되었다 해도 child 뒤에 그려져 보이지 않았던 것이다.. 

 

이에 대한 해결책은 바로 ClipRRect이다. 

공식 문서에서의 해당 위젯에 대한 설명은 다음과 같다 : A widget that clips its child using a rounded rectangle. [Link]

 

해당 위젯으로 감싸면 끝이 둥근 형태의 컨테이너가 틀이되고 자식 위젯이 그 틀 안에서 출력되는 것이다.

 

사용 방법은 아래와 같이 ClipRRect로 감싸준 뒤 대상 위젯을 child로 설정해주면 된다 : 

child: Container(
  width: 100,
  height: 100,
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
    child: Drawer(
      child: navigationDrawer(controller),
    )
  ),
),