[flutter] 다양한 모양의 클리퍼 만들기

05 Dec 2023

flutter

클리퍼는 Flutter에서 UI 요소를 잘라서 다양한 모양으로 표현하는데 사용될 수 있는 강력한 기능입니다. 이 기능을 활용하면 일반적인 네모나 원형의 형태뿐만 아니라 사용자 정의 모양을 가진 클리퍼를 만들 수 있습니다. 이번 포스트에서는 Flutter에서 다양한 모양의 클리퍼를 만드는 방법을 알아보겠습니다.

1. 원형 클리퍼 만들기

원형 클리퍼를 만들기 위해서는 ClipOval 위젯을 사용하면 됩니다. 아래 코드는 원형 클리퍼를 생성하는 예제입니다.

ClipOval(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Center(child: Text('원형 클리퍼')),
  ),
)

2. 네모 클리퍼 만들기

네모 클리퍼를 만들기 위해서는 ClipRect 위젯을 사용하면 됩니다. 아래 코드는 네모 클리퍼를 생성하는 예제입니다.

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
    child: Center(child: Text('네모 클리퍼')),
  ),
)

3. 사용자 정의 클리퍼 만들기

만약 원하는 형태의 클리퍼를 만들고 싶다면, CustomClipper 클래스를 상속받아 사용자 정의 클리퍼를 만들 수 있습니다. 아래 코드는 사용자 정의 클리퍼를 생성하는 예제입니다.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    // 클리퍼의 원하는 모양을 path로 정의합니다.
    path.moveTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(0, size.height - 50);
    path.close();
    return path;
  }

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

ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.orange,
    child: Center(child: Text('사용자 정의 클리퍼')),
  ),
)

위 코드에서는 MyCustomClipper 클래스를 정의하고 원하는 형태를 path로 정의한 후, ClipPath 위젯에 clipper 속성으로 사용합니다. 이렇게 하면 사용자 정의 클리퍼를 생성할 수 있습니다.

결론

Flutter에서 다양한 모양의 클리퍼를 만들기 위해서는 ClipOval, ClipRect, 그리고 CustomClipper를 사용할 수 있습니다. 앞으로 이러한 클리퍼를 활용하여 UI를 더욱 다채롭게 표현해보세요.