[TIL-018] Flutter의 AspectRatio위젯의 재발견

AspectRatio

`AspectRatio`위젯은 부모 위젯의 너비를 기준으로 가로 세로 비율을 정하여 본인의 크기를 지정하는 위젯이다.

보통 이미지의 크기를 지정할 때 많이 사용하는 위젯이라고 하는데 이번에 연습하면서 이 위젯의 장점을 발견했기에 TIL을 작성해 본다.

 

상황

세로 방향

• 이미지의 너비를 500으로 지정한 상황
• 다행히, 부모 위젯이나 뷰포트보다 이미지의 너비가 커서 아무 문제가 없어 보인다.
• 그러나 이미지들의 원본 비율 때문에 높이가 다른 것을 볼 수 있다.

 

가로 방향

• 이미지의 너비를 500으로 지정했기 때문에 핸드폰을 가로로 봐도 이미지의 크기가 변동이 없다.
• 이러한 모습을 디자인했다면 상관없겠지만, 어떤 방향이든 이미지가 꽉 차야하는 경우가 있을 경우가 있다.
• 이럴 때 `AspectRaio`를 사용하면 좋다.

 

방법

Expanded(
  child: AspectRatio(
    aspectRatio: 1 / 1,
    child: Image.aseets('path')
  )
)

• 상황에 따라 `Expanded`위젯은 삭제해도 된다.
• 비율은 원하는 만큼 지정하면 어떤 방향이든 이미지는 꽉 채워서 보여진다.

 

마무리(느낀 점)

이런 방법으로 반응형을 만들 수 있을 것 같다.

그렇지만 반응형을 만들 때 사용하는 위젯이 따로 있을게 분명하다.

폴드형 핸드폰이 계속 나오고 있는 만큼 반응형에 대해서 잘 숙지해야 할 것 같다.