Flutter의 ClipRRect

ClipRRect는 Flutter에서 사용되는 위젯으로, 자식 위젯을 둥근 모서리(RoundedRectangle)로 잘라내는 데 사용됩니다. ClipRRect는 UI 디자인에서 모서리를 부드럽게 처리하거나 특정 영역만 표시하고 싶을 때 유용합니다.

---

기본 구조

ClipRRect는 자식 위젯과 borderRadius 속성을 받아 해당 영역을 둥글게 자릅니다.

ClipRRect(
  borderRadius: BorderRadius.circular(16.0), // 둥근 모서리 반지름
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
)

주요 속성

1. borderRadius

   • 둥근 모서리의 반지름을 설정합니다.
   • BorderRadius.circular(value)를 사용하여 모든 모서리를 같은 값으로 둥글게 만들거나, BorderRadius.only를 사용하여 특정 모서리만 둥글게 설정할 수 있습니다.
   • 예:

     BorderRadius.circular(16.0) // 전체를 둥글게
     BorderRadius.only(
       topLeft: Radius.circular(16.0),
       bottomRight: Radius.circular(8.0),
     ) // 특정 모서리만 둥글게

2. clipBehavior

   • 클리핑 방식을 설정합니다.
   • 기본값은 Clip.antiAlias로, 클리핑을 부드럽게 처리합니다.
   • 옵션:
     • Clip.none: 클리핑하지 않음.
     • Clip.hardEdge: 성능에 초점을 둔 간단한 클리핑.
     • Clip.antiAlias: 부드러운 가장자리 처리.
     • Clip.antiAliasWithSaveLayer: 부드러운 가장자리와 함께 추가 레이어 생성.

---

예제 1: 이미지 둥글게 자르기

이미지를 ClipRRect로 감싸서 둥근 모서리를 적용합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ClipRRect Example')),
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16.0),
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 150,
              height: 150,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

• 결과: 네트워크에서 가져온 이미지가 16px 둥근 모서리를 가진 사각형으로 표시됩니다.

---

예제 2: 특정 모서리만 둥글게 만들기

텍스트와 배경색을 포함한 컨테이너에 특정 모서리를 둥글게 만듭니다.

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20.0),
    bottomRight: Radius.circular(20.0),
  ),
  child: Container(
    color: Colors.amber,
    width: 200,
    height: 100,
    child: Center(
      child: Text(
        'Rounded Corners!',
        style: TextStyle(fontSize: 16),
      ),
    ),
  ),
)

• 결과: 상단 왼쪽과 하단 오른쪽 모서리만 둥글게 처리된 사각형 컨테이너가 표시됩니다.

---

예제 3: 버튼에 둥근 모서리 추가

ClipRRect를 사용해 버튼을 둥글게 처리합니다.

ClipRRect(
  borderRadius: BorderRadius.circular(30.0),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    ),
    child: Text('Rounded Button'),
  ),
)

• 결과: 둥근 버튼이 생성됩니다.

---

언제 사용하나요?

• 둥근 모서리 이미지: 사용자 아바타나 사진에 둥근 모서리 처리.
• 카드 디자인: 컨테이너나 버튼을 더 부드럽고 세련된 모양으로 만듦.
• UI 제한: 자식 위젯이 부모 영역을 넘지 않도록 자를 때.

---

ClipRRect와 다른 클리핑 위젯 비교

1. ClipOval: 원형(또는 타원형)으로 클리핑.
2. ClipPath: 사용자 정의 경로를 따라 클리핑.
3. ClipRect: 사각형 영역으로 자름 (모서리 둥글림 없음).

---