[flutter] AspectRatio를 사용하여 포인터 이벤트 처리하기
Flutter에서 UI를 구성하다 보면 화면 요소의 크기 비율을 유지하면서 자식 위젯과 상호작용하는 경우가 있습니다. 이때 AspectRatio
위젯을 사용하여 비율을 유지하면서 포인터 이벤트를 처리할 수 있습니다.
AspectRatio 위젯이란?
우선 AspectRatio
위젯은 자식 위젯의 가로와 세로 비율을 유지하면서 크기를 조절하는 데에 사용됩니다. 즉, 자식 위젯의 크기가 변경되면 AspectRatio
는 이에 따라 자동으로 크기를 조절하여 비율을 유지합니다.
포인터 이벤트 추가하기
AspectRatio
위젯 안에서 포인터 이벤트를 받아 처리하기 위해서는 GestureDetector
나 InkWell
과 같은 위젯을 추가하여야 합니다. 아래의 예시 코드를 참고해 보세요.
AspectRatio(
aspectRatio: 1.5,
child: GestureDetector(
onTap: () {
// 포인터 탭 이벤트 처리
},
child: Container(
color: Colors.blue,
child: Center(
child: Text('Tap me'),
),
),
),
)
위의 코드에서 AspectRatio
의 자식으로 GestureDetector
를 추가하여 탭 이벤트를 처리할 수 있습니다. GestureDetector
자식으로는 간단한 컨테이너와 UI 요소들도 추가할 수 있습니다.
결론
AspectRatio
를 사용하여 UI의 비율을 유지하면서 포인터 이벤트를 처리하는 방법에 대해 알아보았습니다. 이러한 방법을 통해 Flutter 앱에서 세련된 UI를 만들 수 있을 것입니다. 추가적인 자세한 정보는 공식 Flutter 문서를 참고하시기 바랍니다.