Flutter에서 AspectRatio를 이용해서 이미지 비율에 맞게 보여주기

안녕하세요.
이번 포스팅에서는 AspectRatio를 이용해서 이미지를 비율에 맞게 보여주는 방법에 알아보겠습니다.

css에 보면 aspect-ratio라고 있는데 16:9 사이즈를 보여주려면 아래와 같이 사용을 합니다.

.className {
  aspect-ratio: 16 / 9;
}

Flutter에도 css와 동일하게 AspectRatio가 있습니다.
사용하는 방법은 아래와 같습니다.

AspectRatio(
  aspectRatio: 16 / 9,
  child: ...
)

이제 AspectRatio의 child에 Image를 추가를 해보겠습니다.

AspectRatio(
  aspectRatio: 16 / 9,
  child: Image.network('https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80')
)

그러면 아래와 같이 16:9 사이즈로 이미지가 보이는 것을 볼수 있습니다.

 

그런데 위의 이미지가 16:9인걸 어떻게 아는지 궁금하시다면 비율을 변경을 해보면 됩니다.
저는 16 / 9 를 1 / 1로 변경을 했습니다.

그런데 위의 이미지를 보면 맞는 비율로 나오는지 알수가 없습니다. 이유는 보여지는 이미지가 1:1 비율에 꽉 차지 않아서 그렇습니다.
꽉 차게 만들기 위해 이미지에 fit 옵션으로 cover를 추가해주겠습니다.

AspectRatio(
  aspectRatio: 1 / 1,
  child: Image.network(
    'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80',
    fit: BoxFit.cover,
  ),
),

그러면 아래와 같이 1:1 비율로 꽉찬 이미지를 볼수 있습니다.

여기까지 부족한 글 읽어주셔서 감사합니다.
제가 잘못 작성한 내용이나 부족한 부분이 있다면 알려주시면 보완 수정하겠습니다.

감사합니다💛