[flutter] 플러터 앱에서 사용되는 클리퍼의 종류와 응용 예제

05 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 다양한 모바일 앱을 만들기 위해 사용됩니다. 플러터 앱에서는 클리퍼(Clipper)를 사용하여 원하는 모양을 가진 위젯을 만들 수 있습니다. 클리퍼는 특정 모양으로 위젯을 잘라내는 역할을 합니다.

1. 클리퍼 종류

1.1. CustomClipper

CustomClipper는 특정 모양으로 위젯을 자유롭게 자르고자 할 때 사용됩니다. CustomClipper 클래스를 상속받아서 사용자 정의 클리퍼를 만들 수 있습니다. 예를 들어, 원형 모양이나 다각형 모양과 같이 특정한 모양으로 위젯을 자를 수 있습니다.

1.2. ShapeBorderClipper

ShapeBorderClipper는 플러터에서 제공하는 여러 가지 모양을 사용하여 위젯을 자르고자 할 때 사용됩니다. 예를 들어, 원형, 사각형, 타원 등의 모양으로 위젯을 자를 수 있습니다.

2. 클리퍼 응용 예제

2.1. 원형 클리퍼

class CircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.addOval(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2));
    return path;
  }

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

class CircleClipperExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CircleClipper(),
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

위 예제는 원형 클리퍼를 사용하여 파란색의 원형 위젯을 생성합니다. CustomClipper 클래스를 상속받은 CircleClipper 클래스를 정의하고, getClip() 메서드를 구현하여 원형 모양의 클리핑 경로를 생성합니다. shouldReclip() 메서드는 클리핑 경로가 변경되었을 때 재클리핑 여부를 결정합니다. CircleClipperExample 위젯에서는 ClipPath와 CircleClipper를 사용하여 클리핑을 적용하고, Container 위젯을 사용하여 원형 클리퍼를 확인할 수 있습니다.

2.2. 사각형 클리퍼

class RectangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.addRect(Rect.fromLTRB(0, 0, size.width, size.height));
    return path;
  }

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

class RectangleClipperExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: RectangleClipper(),
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    );
  }
}

위 예제는 사각형 클리퍼를 사용하여 빨간색의 사각형 위젯을 생성합니다. RectangleClipper 클래스를 정의하고, getClip() 메서드를 구현하여 사각형 모양의 클리핑 경로를 생성합니다. RectangleClipperExample 위젯에서는 ClipPath와 RectangleClipper를 사용하여 클리핑을 적용하고, Container 위젯을 사용하여 사각형 클리퍼를 확인할 수 있습니다.

이처럼 플러터에서는 다양한 클리퍼를 사용하여 원하는 모양의 위젯을 생성할 수 있습니다. 클리퍼를 적용하면 다양한 디자인 요소를 추가할 수 있으며, 앱의 사용자 경험을 향상시킬 수 있습니다.