[flutter] 플러터 앱에 적용할 수 있는 custom clippers

05 Dec 2023

flutter

플러터는 매우 다양한 사용자 정의 디자인 요소를 생성하기 위한 기능을 제공합니다. 클리퍼(Clipper)는 그 중 하나로, 특정 모양으로 위젯을 자를 수 있게 해줍니다. 이 글에서는 플러터 앱에 적용할 수 있는 몇 가지 사용자 정의 클리퍼를 소개하겠습니다.

1. 원형 클리퍼 (Circular Clipper)

class CircularClipper 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;
}

이 CustomClipper를 사용하면 위젯이 원 모양으로 잘립니다. 예를 들어, 이미지 위에 원형 클리퍼를 적용하면 이미지가 원 모양으로 보여집니다.

2. 다각형 클리퍼 (Polygon Clipper)

class PolygonClipper extends CustomClipper<Path> {
  final int sides;

  PolygonClipper(this.sides);

  @override
  Path getClip(Size size) {
    final path = Path();
    final double section = 2.0 * math.pi / sides;
    final double radius = size.width / 2;
    final Offset center = Offset(size.width / 2, size.height / 2);

    path.moveTo(center.dx + radius * math.cos(0.0), center.dy + radius * math.sin(0.0));
    for (int i = 1; i < sides; i++) {
      path.lineTo(center.dx + radius * math.cos(section * i), center.dy + radius * math.sin(section * i));
    }
    path.closePath();

    return path;
  }

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

이 CustomClipper를 사용하면 다각형 모양으로 위젯이 잘립니다. 위 코드에서 sides 변수로 원하는 다각형의 변 수를 설정할 수 있습니다.

3. 파도 클리퍼 (Wave Clipper)

class WaveClipper extends CustomClipper<Path> {
  final double amplitude;
  final double frequency;

  WaveClipper({this.amplitude = 10, this.frequency = 2});

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, size.height / 2);
    for (int i = 0; i < size.width.toInt(); i++) {
      final double x = i.toDouble();
      final double y = amplitude * math.sin(frequency * x * math.pi / 180) + size.height / 2;
      path.lineTo(x, y);
    }
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    return path;
  }

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

위 코드는 Sin 곡선을 이용하여 파도 모양의 클리퍼를 생성하는 예입니다. amplitude와 frequency 변수로 파도의 높이와 빈도를 조절할 수 있습니다.

4. 각진 클리퍼 (Cornered Clipper)

class CorneredClipper extends CustomClipper<Path> {
  final double cornerRadius;

  CorneredClipper({this.cornerRadius = 20});

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, cornerRadius);
    path.lineTo(0, size.height - cornerRadius);
    path.quadraticBezierTo(0, size.height, cornerRadius, size.height);
    path.lineTo(size.width - cornerRadius, size.height);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height - cornerRadius);
    path.lineTo(size.width, cornerRadius);
    path.quadraticBezierTo(size.width, 0, size.width - cornerRadius, 0);
    path.lineTo(cornerRadius, 0);
    path.quadraticBezierTo(0, 0, 0, cornerRadius);
    path.close();

    return path;
  }

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

이 클리퍼를 사용하면 위젯의 모서리가 각진 형태로 잘립니다. cornerRadius 변수로 원하는 각진 정도를 조절할 수 있습니다.

결론

위에서 소개한 사용자 정의 클리퍼들을 사용하면 플러터 앱에 다양한 독특한 디자인 요소를 구현할 수 있습니다. 이 외에도 플러터는 사용자가 직접 클리퍼를 만들고 사용할 수 있는 기능을 제공하므로 창의적인 디자인을 구현할 수 있습니다.

참고: Flutter CustomClipper 클래스 문서