AspectRatio class
자식 위젯의 크기를 특정 종횡비에 맞게 조정하는 위젯입니다.
종횡비는 너비와 높이의 비율로 표현됩니다. 예를 들어, 16:9 너비:높이 종횡비는 16.0/9.0이 됩니다.
공식 문서 코드
AspectRatio 위젯은 부모 위젯이 허용한 공간 안에서 자식 위젯이 가로 : 세로 비율을 유지하며 크기 결정에 도움을 주는 위젯이다. 주로 16:9의 비율을 가지게 하거나 정사각형의 비율을 가지게 하고 싶을 때 사용 된다. 한번 간단하게 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| aspectRatio | double | – | 가로를 세로로 나눈 비율로, 이 비율에 맞게 자식의 크기를 조정 |
| child | Widget | – | 비율을 맞춰서 표시될 자식 위젯 |
사용법은 아주 간단하다. aspectRatio 에 비율값을 넣으면 그 값이 반영되어 크기를 정해준다.
SizedBox(
width: 200,
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.blue,
),
),
)아주 간단하게 코드를 작성해 보았다. 앞서 설명했듯 AspectRatio 은 부모 위젯이 허용한 공간 안에서 크기를 가지게 되기 때문에 SizedBox 로 width 값만 먼저 지정해주었다. 이제 그리고 aspectRatio 에 16 / 9를 적어주고 child 엔 그냥 색만 가지고 있는 컨테이너를 배치하였다, 결과물은 어떨까?
음. 원하는 방향처럼 잘 나온 것 같다. 자 그럼 여기서 생기는 의문. 이 위젯의 비율은 어떻게 정한걸까? 답은 아주 간단하다.
aspectRatio 에 자신이 원하는 비율(종횡비)을 넣어주면 된다. aspectRatio 는 말 그대로 가로 / 세로 비율을 나타내고 있는데 내가 쓴 것처럼 16 / 9 를 넣어주면 그대로 16:9의 크기로 나타나는 것이다.
주의해야 할점으로는 계속 말하지만 부모 위젯이 주는 넓이 제한에 따라 자식의 높이(너비)를 자동으로 계산해 버리기 때문에 이 점 꼭 유의하고 부모 크기에 지정을 해놔야 한다. 자 그럼 실제로 저 위젯이 16:9 일까? 한번 실제로 봐보자.
플러터에는 많은 초보자들이 모르는 기능이 있는데 DevTools 로 디버깅을 할 수 있다는 것이다. 굉장히 쉬우니 한번 해보길 바란다.
사진에 보이는 것 처럼 왼쪽 툴바에서 Run 탭으로 이동하면 'Open Flutter DevTools In Browser' 이란 게 있는데 이걸 클릭해 주면 브라우창이 뜰 거다. (사실 Flutter Inspector 사용하면 되는데 난 이거 사용을 더 추천한다.)
여기서 'Flutter Inspector' 탭으로 이동해준다. 이동했다면 이제 여러 기능들이 있는 화면이 보일 텐데 이번엔 여기서 'Select Widget Mode' 를 선택해 주겠다.
이제 디버깅하고 있는 화면으로 돌아오면 화면에 있는 위젯을 모두 선택해서 볼 수가 있다. 여기서 만들어 놓은 컨테이너의 크기를 보면..
그렇다. width 는 200이 잘 지켜지고 있고 그에 맞춰서 정확하게 16:9 비율로 높이가 112.5가 되어 버린 모습이다.
이렇게 이번엔 AspectRatio 에 대해서 간단하게 알아보았다. 이 위젯이 보통 사용 되는 곳은 비율이 망가지면 안 되는 사진이나 위젯을 사용하는 상황에서 이고 내가 사용하는 상황은 크기를 비율에 맞춰서 주고 싶은데 굳이 계산기 꺼내서 비율 맞추기 싫을 때 사용하곤 한다. 암튼 도움이 되었길 바라며 마치겠다.
