Flutter[플러터] / ClipOval 을 사용하여 모서리를 둥글게 만들기 (원형, 타원형, 클립오발, 동그랗게, 가장자리) ClipOval (Flutter Widget of the Week)

ClipOval class

타원을 사용하여 자식 위젯을 클립 하는 위젯입니다.

https://youtu.be/vzWWDO6whIM

코드 예제

 

---

그림이나 화면에 있는 다른 부분들이 너무나 네모나게 보여 가장자리에 모서리가 있는 위젯을 원형이나 타원형으로 제작하고 싶을 때가 있다. 이럴 때 쓸 수 있는 것이 바로 ClipOval위젯이다.

이 ClipOval위젯은 자식 위젯은 타원형 혹은 원형으로 자르는 데 사용한다. 이 위젯은 일반적으로 이미지나 컨테이너 등의 위젯을 원형 프로필 이미지처럼 보이게 만들고 싶을 때 유용하다. 한번 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
clipper	CustomClipper<Rect>?	null	사용자 정의 클리퍼를 지정해 타원의 경계를 결정함
clipBehavior	Clip	Clip.antiAlias	자식 위젯을 어떤 방식으로 잘라낼지 결정하는 클립 동작
child	Widget	–	타원 형태로 잘릴 자식 위젯

사용하는 방법은 엄청나게 간단하다. 동그랗게 만들고 싶은 위젯에 그냥 ClipOval을 씌워주기만 하면 된다.

ClipOval(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

이렇게 하면 바로 간단하게 우리가 원하는 위젯의 모서리를 동그랗게 만들어 줄 수 있다.

하지만 여기서 굉장히 놀라운 점이 있는데 자식 위젯이 크기가 원형으로 잘라지지 않는다면 그 크기에 맞혀 타원형으로 감싸지게 된다.

ClipOval(
  child: Container(
    width: 150,
    height: 100,
    color: Colors.blue,
  ),
)

당연하지만 이것은 컨테이너 같은 위젯뿐만 아니라 이미지에도 적용이 된다.

ClipOval(
  child: Image.asset(
    'assets/faker.jpeg',
  ),
)

근데 이렇게 자동 맞춤으로 자식 위젯이 잘리는 것이 아니라 자신이 원하는 대로 자르게 하고 싶다면 어떻게 해야 할까? 그땐 clipper 파라미터를 사용하여 자신만의 맞춤 클리퍼를 만들어 사용해 주면 된다.

ClipOval(
  clipper: MyClipper(), // CutomClipper 사용
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

맞춤 클리퍼, CustomClipper를 사용하는 방법은 간단하다.

먼저 새로운 클래스를 만들어줘야 한다.

class MyClipper{
}

그 후 CustomClipper<Rect>로 클래스를 확장시켜 주면 된다.

class MyClipper extends CustomClipper<Rect>{
}

이렇게 만들어줬다면 이제 두 가지의 메서드가 만들어질 것이다.

class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    // TODO: implement getClip
    throw UnimplementedError();
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    // TODO: implement shouldReclip
    throw UnimplementedError();
  }
}

여기서 먼저 shouldReclip 메서드는 다시 클리퍼가 작동해야 하는지에 대한 여부인데 특별한 동작을 추가하지 않을 것이면 false를 반환시켜 주면 되겠다.

@override
bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => false;

이제 getClip 메서드에서 사이즈를 지정해 주면 된다.

여기서 getClip 메서드는 자식의 크기를 가져와서 Rect로 돌아오게 되는데 이 Rect 값을 통해 원형이나 타원형을 그릴 수 있게 한다. Rect는 어디에나 둘 수 있고 어떤 크기든 만들 수 있다.

예를 들어 자식의 왼쪽 상단에 타원형을 두려고 해 보자.

@override
Rect getClip(Size size) {
  return Rect.fromLTWH(0, 0, 200, 100);
}

이렇게 만들어주면 크기 상관없이 넓이를 200, 높이를 100으로 제한한 클리퍼가 완성되게 된다.

여기서 Rect.fromLTWH에 대해서 간단하게 알아보고 넘어가야 할 것이다.

Rect.fromLTWH

이 생성자는 왼쪽과 상단 가장자리, 너비 및 높이에서 사각형을 구성할 수 있도록 도와주는데 이름 그대로 각 파라미터는 left, top, width, height의 값을 각각 입력받고 있고 그렇게 값을 입력해서 넣어주면 아래와 같은 결과물이 나온다.

다만 아래 사진과 같은 "대각선으로 위치시킨 타원형" 같은 모양은 만들지 못하는데 그 이유로는 ClipOval위젯은 항상 타원을 X축, Y축에 정렬되게 계산하기 때문이다. 그 이유 때문에 아예 마음대로 다 자를 수 있는 ClipPath를 사용해줘야 할 것이다.

이렇게 ClipOval 위젯에 대해서 알아보았다. 컨테이너 같은 경우에는 Boxdecoration의 shap: BoxShape.circle도 많이 쓰곤 하지만 이건 자식 위젯의 크기에 따라 잘리는 정도가 다르기에 굉장히 다방면에서 쉽고 빠르게 사용할 수 있는 위젯이므로 많이 사용되곤 한다. 암튼 도움이 되었길 바라며 마치겠다.