Flutter에서 원형 아이콘 표시

Flutter에서는 프로필 이미지 등에서 자주 볼 수 있는 원형 아이콘을 Image에 Widget을 래핑하여 쉽게 구현할 수 있습니다.

Assets에 이미지를 추가하는 방법은 이 기사 를 참고해 주시면 좋겠습니다.

ClipOval 래핑

코드 샘플

ClipOval(
          child: Image.asset(
            'assets/images/sample.png',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          ),
        ),

ClipOval 는 타원형으로 만드는 Widget입니다.

ClipRRect 래핑

코드 샘플

ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: Image.asset(
            'assets/images/sample.png',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
          ),
        ),

원형으로 하는 경우는, image의 절반의 사이즈를 borderRadius: BorderRadius.circular 로 지정할 필요가 있습니다.
borderRadius 의 값을 변경하여 자유롭게 둥근 크기를 변경할 수 있습니다.

↓borderRadius를 50으로 지정한 경우

실행 결과

이번에 소개한 코드의 어느 쪽으로 실행해도, 보이는 방법은 같습니다.

공식 문서

ClipOval
htps : // 아피. fぅ r. 에서 v / f ぅ는 r / 우드 게 ts / C ぃp ct-c ぁ s. HTML
ClipRRect
htps : // 아피. fぅ r. 에서 v/fぅ는 r/우우드게 ts/Cぃぽゔぁl-cぁ s. HTML