[Flutter] 이미지 정방형으로 자르기 및 radius 설정

이미지 정방형으로 자르기

SizedBox의 width, height 속성을 이용해 같은 길이로 설정한다.

그리고 Image widget의 fit.cover 옵션을 추가한다.

  SizedBox(
    width: 100,
    height: 100,
    child: Image.network(
      "https://img-cf.kurly.com/shop/data/goodsview/20211223/gv10000260857_1.jpg",
      fit: BoxFit.cover,
    ),
  )

fit 옵션 설명

• BoxFit.cover
  비율대로 조정한 다음 적당히 잘라 버리고 늘리는 현상이 없다.
• BoxFit.fill
  원본 이미지 비율 무시하고 늘리는 현상이 있다.
• BoxFit.contain
  원본 이미지 비율 그대로 보여주지만 크기에 안 맞으면 여백이 발생한다.
• BoxFit.fitWidth, fit: BoxFit.fitHeight
  원본 이미지 비율을 가로 또는 세로에 맞춰주지만 비율/크기가 일치하지 않으면 여백이 발생한다.
• 옵션 없음
  원본 크기 유지하여 원본으로부터 해당 영역 크기만큼만 잘라 냄, 화면 대비 큰 해상도 이미지이면 배경 다 잘리고 엉뚱한 부분만 잘려 나올 수 있다. (예상 불가)

 

이미지 borderRadius 설정

[1] Container widget으로 감싸기

Container(
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
    ),
    child: Image.network(
      imageUrl,
      fit: BoxFit.cover,
    ),
  )

Container widget으로 감싸서 clipBehavior와 decoration 속성을 부여하면 된다.

 

[2] ClipRRect widget으로 감싸주고 borderRadius를 주면 된다.

ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Image.network(
      imageUrl,
      fit: BoxFit.cover,
    ),
  )

🔗 참고

02. 이미지