Develop/Flutter

flutter 프로필 사진 이미지를 동그랗게 보이고 싶을 때 ClipRRect 사용하기

issuemaker99 2024. 7. 7. 16:33
728x90

둥근 사각형을 사용하여 자식 위젯을 클리핑하는 위젯입니다.
기본적으로 ClipRRect는 클립의 기본 사각형으로 자체 경계를 사용하지만 사용자 정의 클리퍼를 사용하여 클립의 크기와 위치를 사용자 정의할 수 있습니다.

 

● 예제소스


Widget _avatar() {
    return Column(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: SizedBox(
            width: 100,
            height: 100,
            child: Image.asset(
              'assets/images/default_image.png',
              fit: BoxFit.cover,
            ),
          ),
        )
      ],
    );
  }

 

● 결과 

Image.asset 의 fit: BoxFit.cover, 옵션이 있을 때 이미지 크기에 맞춰서 보여준다 Image.asset 의 fit: BoxFit.cover, 옵션이 없으면 이미지 크기에 따라 지정된 범위를 벗어나서 보여질 수 있다.

 

 

LIST