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

05 Dec 2023

flutter

플러터는 Google에서 개발한 모바일 앱 개발 프레임워크로, UI 구성 요소를 사용하여 아름답고 직관적인 앱을 만들 수 있습니다. 이러한 앱에서는 종종 클리퍼(clipper)라는 개념을 사용하여 UI 요소를 원하는 모양으로 자를 수 있습니다. 이번 블로그 포스트에서는 플러터 앱에서 사용되는 클리퍼의 종류와 각각의 응용 예제를 알아보겠습니다.

클리퍼 종류

1. `CustomClipper<Path>`

CustomClipper<Path>는 사용자가 직접 클리핑 경로를 정의할 수 있는 클리퍼입니다. getPath 메서드를 오버라이드하여 원하는 모양의 경로를 생성할 수 있습니다. 예를 들어, 원형 모양이나 다각형 모양 등을 생성할 수 있습니다.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    // 원하는 클리핑 경로를 생성하는 코드 작성
    return path;
  }

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

2. `ClipRRect`

ClipRRect는 원하는 모서리를 둥글게 자르는 클리핍 기능을 제공합니다. 둥근 테두리를 만들고 싶은 이미지나 컨테이너에 적용할 수 있습니다.

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Container(
    // 원하는 내용 작성
  ),
)

3. `ClipOval`

ClipOval은 원형으로 자르는 클리핍 기능을 제공합니다. 주로 프로필 사진이나 아이콘을 원형으로 보여주는데 사용됩니다.

ClipOval(
  child: Image.asset('images/profile.png'),
)

4. `ClipPath`

ClipPath는 원하는 모양을 지정하여 클리핑 할 수 있습니다. 예를 들어, 별모양이나 하트 모양 등 다양한 모양으로 클리핑 할 수 있습니다.

ClipPath(
  clipper: MyCustomClipper(), // 원하는 클리핑 경로를 생성하는 커스텀 클리퍼 사용
  child: Container(
    // 원하는 내용 작성
  ),
)

응용 예제

1. 갤러리 앱의 이미지 선택 영역 클리핑

CustomClipper<Path> getClipper() {
  return MyCustomClipper(); // 이미지 선택 영역을 클리핑하는 커스텀 클리퍼
}

ClipPath(
  clipper: getClipper(),
  child: Image.asset('images/photo.png'),
)

2. 프로필 사진 둥근 테두리 적용

ClipRRect(
  borderRadius: BorderRadius.circular(50), // 50px 반지름의 둥근 테두리
  child: Image.asset('images/profile.png'),
)

3. 로그인 버튼을 별 모양으로 클리핑

ClipPath(
  clipper: StarClipper(), // 별 모양 클리핍 경로를 만드는 커스텀 클리퍼
  child: ElevatedButton(
    child: Text('로그인'),
    onPressed: () {},
  ),
)

위의 예제를 참고하여 플러터 앱에서 클리퍼를 활용하는 다양한 모양과 스타일을 적용해보세요. 자유롭게 클리핑 경로를 정의하고 원하는 모양으로 UI 요소를 꾸밀 수 있습니다.

클리퍼 종류

1. CustomClipper<Path>

2. ClipRRect

3. ClipOval

4. ClipPath