플러터는 다양한 UI 요소를 구현할 수 있도록 제공되는 프레임워크입니다. 그 중에서도 클리핑(클리핍)은 앱의 UI 요소를 특정 모양으로 자르는 기능을 제공합니다. 이번 블로그에서는 플러터 앱에서 다양한 클리퍼 스타일을 적용하는 방법을 소개하겠습니다.

1. Circle 클리퍼

Circle 클리퍼는 주어진 영역을 원형으로 자르는 스타일입니다. 원형의 클리핑을 적용하려면 ClipOval 위젯을 사용하면 됩니다. 아래는 Circle 클리퍼를 적용한 예제 코드입니다.

ClipOval(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
)

2. RoundRect 클리퍼

RoundRect 클리퍼는 주어진 영역을 둥근 모서리가 있는 직사각형 모양으로 자르는 스타일입니다. 둥근 모서리의 클리핑을 적용하려면 ClipRRect 위젯을 사용하면 됩니다. 아래는 RoundRect 클리퍼를 적용한 예제 코드입니다.

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

3. Custom 클리퍼

Custom 클리퍼는 주어진 영역을 사용자가 원하는 모양으로 자르는 스타일입니다. 사용자 정의 클리핑을 적용하려면 CustomClipper 클래스를 상속하는 클래스를 만들고 getClip 메서드를 오버라이딩하여 원하는 클리핑 로직을 작성해야 합니다.

아래는 직사각형에 대각선으로 자르는 Custom 클리퍼를 적용한 예제 코드입니다.

class DiagonalClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..moveTo(0, size.height * 0.2)
      ..lineTo(size.width, size.height * 0.8)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

ClipPath(
  clipper: DiagonalClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
  ),
)

위의 예제 코드에서는 DiagonalClipper 클래스를 정의하여 사용자 정의 클리핑 로직인 대각선으로 자르는 기능을 구현하였습니다.

마치며

위에서는 플러터 앱에서 다양한 클리퍼 스타일을 적용하는 방법에 대해 알아보았습니다. 플러터의 클리핑 기능을 사용하여 UI 요소를 다양하게 꾸밀 수 있으니 창의적으로 활용해보세요!

더 자세한 내용은 아래의 참고 자료를 확인해보세요.

• Flutter Documentation
• Flutter ClipOval
• Flutter ClipRRect
• Flutter CustomClipper