[flutter] 플러터 앱에서 다양한 클리퍼 스타일 적용하기
목차
클리퍼란?
클리퍼(clipper)는 플러터(Flutter) 앱에서 컨테이너나 이미지 등의 위젯의 형태를 특정한 모양으로 자를 수 있는 기능을 제공하는 클래스입니다. 클리퍼를 사용하면 원, 사각형, 다각형 등 다양한 모양으로 위젯을 자를 수 있습니다.
다양한 클리퍼 스타일 적용하기
플러터에서는 다양한 클리퍼 스타일을 제공하고 있습니다. 아래는 몇 가지 예시입니다.
1. Circle 클리퍼
원 모양으로 위젯을 자르는 Circle 클리퍼를 사용하려면 ClipOval 위젯을 사용합니다. child 속성에 자를 대상이 되는 위젯을 넣어줍니다.
ClipOval(
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
)
2. RRect 클리퍼
사각형 모양에 동그란 모서리를 가진 라운드 사각형으로 위젯을 자르는 RRect 클리퍼를 사용하려면 ClipRRect 위젯을 사용합니다. borderRadius 속성으로 모서리의 둥글기를 설정할 수 있습니다.
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
)
3. CustomPainter를 이용한 클리퍼
더 복잡한 클리퍼 스타일을 구현하려면 CustomClipper<Path>를 확장한 클래스를 만들고 getClip() 메서드를 오버라이딩 합니다. 아래는 CustomPainter를 이용한 클리퍼 예시입니다.
class TriangleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0, size.height);
path.lineTo(size.width / 2, 0);
path.lineTo(size.width, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
ClipPath(
clipper: TriangleClipper(),
child: Container(
width: 200,
height: 200,
color: Colors.green,
),
)
위와 같이 CustomPainter를 상속받은 클래스에서 원하는 클리핑 모양을 정의한 뒤, ClipPath를 사용하여 위젯을 클리핑할 수 있습니다.
이처럼 플러터에서 다양한 클리퍼 스타일을 적용하여 위젯을 원하는 모양으로 자를 수 있습니다.