본문 바로가기

안드로이드/Flutter

flutter - 이미지를 동그랗게 만드는 위젯

금일 소개해드릴 위젯은 ClipOval 입니다.

 

ClipOval 위젯은 이미지를 동그랗게, 즉 모서리를 둥글게 원형으로 만들어주는 위젯입니다.

굴절도는 제어할 수 있어, 타원형의 모양으로 만드는 것도 가능합니다.

 

이는 애니메이션을 입혀도 문제없이 작동합니다.

 

사용 예시는 아래와 같습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ClipOval(
    clipper: MyClipper(),
    child: Image.asset('dash.jpg'),
)
 
 
// 원하는대로 크기를 맞추기 위한 클래스
class MyClipper extends CustomClipper<Rect> {
    Rect getClip(Size size) {    // 하위 요소의 사이즈를 가져오는 메소드
    return Rect.fromLTWH(00200100);    // 하위 요소의 사이즈에 상관없이 넓이와 높이 사이즈를 200px, 100px로 놓았다.
}
 
    bool shouldReclip(oldClipper) {
    // ...
    }
}
cs

 

감사합니다.