Flutter[플러터] / ClipRRect 를 사용하여 모서리 둥글게 하기 (래디우스, 라운드) ClipRRect (Flutter Widget of the Week)

ClipRRect class

둥근 사각형을 사용하여 자식 위젯을 클리핑 하는 위젯입니다.

기본적으로 ClipRRect는 클립의 기본 사각형으로 자체 경계를 사용하지만, 사용자 정의 클리퍼를 사용하여 클립의 크기와 위치를 사용자 정의할 수 있습니다.

https://youtu.be/eI43jkQkrvs

 

공식 문서 코드

 

 

---

ClipRRect 는 개발에 있어서 진짜 빠질 수 없는 아주 중요하고 좋은 위젯이다.

기능자체는 놀라울 만큼 간단한데 자식에게 라운드, 래디우스를 준다. 그니까 모서리를 둥글게 해 준다.

하위 속성

속성명	타입	기본값	설명
child	Widget	-	클리핑될 자식 위젯
borderRadius	BorderRadiusGeometry	BorderRadius.zero	둥근 모서리의 반지름을 정의하며, clipper가 null일 때만 적용됨
clipper	CustomClipper<RRect>?	null	사용자 지정 RRect 클리퍼로, 지정 시 borderRadius는 무시됨
clipBehavior	Clip	Clip.antiAlias	클리핑의 품질 또는 성능을 결정하는 동작 방식

 

사용방법은 정말 간단한데 래디우스 주면 자식에 적용이 된다.

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(24)),
  child: Image.asset(
    'assets/faker.jpeg',
    width: 100,
  ),
),

 

BoxDecoration 안에 있는 borderRadius 랑 100% 기능이 일치한다고 보면 된다.

이거 사용할 곳을 감을 잡았을 텐데 이렇게 이미지 자체에다가 라운드를 먹일 때 가장 많이 사용되는 것 같고 그 외엔 컨테이너의 래디우스가 안 먹는 경우 이걸 최상위에 배치해 주면 거의 90% 이상은 먹는다고 보면 된다.

 

이거 진짜 유용하니 꼭 써먹고 도움이 되었길 바라며 마치겠다.

반응형