Flutter: 원형 위젯 만들기 ClipRRect vs. Container

 

자주 사용되는 이런 원형 위젯을 어떻게 만드는 것이 좋을까?

검색 해보면 주로 ClipRRect 를 이용하라고 하는데, 특히 이미지의 경우에는 Container를 사용하는 것이 더 좋은 것 같다.

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: Image.network('https://picsum.photos/250', width: 80)
);

ClipRRect를 사용하면 (당연히) 간단하게 잘 나온다.

그런데, 위의 경우처럼 네트워크 상의 이미지를 사용하는 경우에 사각형이 먼저 보이고, 원형으로 바뀌는 일이 생길 때가 있다.

 

이런 경우에는 아래와 같이 Container + decoration 을 사용하면 잘 된다.

Container(
  width: 80,
  height: 80, 
  clipBehavior: Clip.hardEdge,	// 이것을 지정해주지 않으면 이미지인 경우에 라운드 처리 되지 않는다.
  decoration: BoxDecoration(
    shape: BoxShape.circle),
  child: Image.network('https://picsum.photos/250'),
);

들어가야 할 것이 텍스트인 경우에도 

Container(
  width: 80,
  height: 80, 
  alignment: Alignment.center,
  clipBehavior: Clip.hardEdge,	// 이것을 지정해주지 않으면 이미지인 경우에 라운드 처리 되지 않는다.
  decoration: BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle),
  child: Text('가', style: TextStyle(size: 20, color: Colors.white)),
);

이런 식으로 해주면 되겠다.