반응형(responsive) UI란?
일반적으로 반응형 앱은 화면 크기에 맞게 레이아웃을 조정한다. 사용자가 창 크기를 조정하거나 장치의 방향을 변경하는 경우 UI를 다시 배치하는 것을 의미한다. 스마트폰, 태블릿, 시계, 데스크톱 등 다양한 사이즈의 장치에서 동일한 앱을 실행시키는 경우 필요하다.
반응형 적용
1. flutter 자체 제공 component
별다른 package 설치하지 않아도 flutter에서 제공하는 component들을 사용해 반응형을 적용할 수 있다. flutter 공식 홈페이지에서는 MediaQuery와 LayoutBuilder로 반응형을 구현하고 있다.
MediaQuery
현재 앱의 크기와 방향을 알 수 있다. 특정 위젯의 크기보다는 전체 맥락을 기반으로 의사 결정을 내리고 싶을 때 더 유용하다. 사용자가 앱의 크기를 변경하면 빌드 기능이 자동으로 실행된다.
Container(
width : MediaQuery.of(context).size.width
height : MediaQuery.of(context).size.height
)LayoutBuilder
장치의 높이, 가로 세로 비율 또는 기타 속성을 기반으로 디스플레이를 조정할 수 있다. builder의 BoxConstraints를 가져와 표시할 항목을 결정한다. maxWidth가 개발자가 지정한 width breakpoint(아래 코드에서는 600)보다 크면, wide한 widget을 빌드한다. 태블릿이나 데스크톱이 여기에 해당한다.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
return _buildWideContainers();
} else {
return _buildNormalContainer();
}
},
)2. 라이브러리
라이브러리는 보통 flutter에서 제공하는 component보다 간단한 배치와 짧은 코드로 반응형을 적용할 수 있게 해준다. pub.dev에 responsive로 검색하면 많은 라이브러리가 나온다. 그 중 사용법과 반응형이 제공되는 범위를 확인해보고, 각자의 필요에 맞추어 사용하면 된다.
MediaQuery의 경우, widget을 모듈화할 때 width와 height를 지정해주려면 context를 parameter로 받아야 한다. 라이브러리를 사용하면 context를 따로 넘겨주지 않아도 되어 간편하다.
3. GetX
GetX의 GetResponsiveView 위젯을 사용하면 반응형을 적용할 수 있다. 이 위젯에는 화면 크기 및 유형에 대한 모든 정보가 포함된 화면 속성이 포함되어 있다. desktop, tablet, phone, watch 등 메소드가 정의되어있어, 화면 유형과 메소드가 일치할 때 자동 빌드된다. 예를 들어, 실제 화면이 태블릿일 때와 ScreenType.Tablet 메소드가 일치하면서 빌드된다.
구체적인 사용법은 get_examples github에서 확인할 수 있다.
[참고자료]
https://docs.flutter.dev/ui/layout/responsive/adaptive-responsive
https://pub.dev/packages?q=responsive
https://pub.dev/packages/get#getresponsiveview
