리얼 Flutter #11 UI사이즈 고정 하기 with InheritedWidget

이제 그동안 만들었던 App에 광고도 달았고 플레이 스토어에도 올렸으니 좀 쓸만하게 만들어야겠습니다. 지금 너무 촌스럽거든요. 그래서 좀 예쁘게 만들어보려는데 UI가 글자 크기와 화면 크기 설정에 따라서 너무 많이 달라져서 일부 UI사이즈 고정 이 필요하였습니다.

오늘은 나만의 Layout 속성을 만들고 모든 Widget에서 사용할 수 있도록 하는 것을 설명할 예정이며, 여기서 사용될 InheritedWidget을 사용하는 것을 코드와 함께 설명합니다.

설정에 따른 UI사이즈 변화

휴대폰에는 글자 크기, 화면 크기, 해상도를 선택하는 기능이 있습니다.

설정에 따라서 아래와 같이 UI구성이 큰 차이가 나게 됩니다.

그나마 지금 앱은 주로 Text위주라서 제목이 안 보이는것을 제외하고는 화면이 크게 깨지는 부분은 없지만 화면을 예쁘게 만들려고 하니 버튼이 서로 겹치거나 레이아웃이 완전히 깨지는 문제들이 발생하였습니다.

아래와 같이 나만의 Layout 속성을 만들었습니다.

Flutter에서 제공하는 MediaQueryData를 통해서 화면 해상도를 100으로 나누어 UI Code의 사이즈를 Percentage로 지정할 수 있도록 하기 위함입니다.

Font Size의 경우는 System의 Font Size와 화면해상도 그리고 DPR(Dot Per Rate)를 고려하여 계산하도록 하였습니다.

저의 경우는 위와 같이 font도 정의해놨고 width와 height를 쉽게 구할 수 있도록 만들어놨습니다.

여기에 저는 앞으로 Color나 다양한 widget의 속성을 추가하면서 사용할 예정이고 어느정도 갖추어지면 향후 library로 만들어 제가 사용하는 앱들에 import하여 사용할 예정입니다.

Flutter는 모든 ui의 구성 요소는 widget이 될 수 있고 Tree 구조로 만들어집니다.

이렇게 widget으로 만들어서 하위 트리에서 사용할 수 있도록 하기 위해서 InheritedWidget을 사용합니다.

StatelessWidget이나 StatefulWidget이 아니라 InheritedWidget을 상속 받습니다.

앞서 정의해주었던 Layout 속성을 data로 갖도록 하고 of method를 통해 Layout 속성을 하위 Widget 어느곳에서든지 사용할 수 있도록 합니다.

위와 같이 KowanasLayoutInfo 를 먼저 인스턴스를 만들구요.

Widget 트리에서 상위에 KowanasLayout(data: layoutInfo, child: Scaffold … 로 위치해주면 하위 Widget들에서 아래와 같이 호출하여 사용할 수가 있습니다.

아래 그림을 보면 Status Bar나 광고 이미지를 보면 왼편은 화면도 폰트도 크게 했던 경우이고 오른쪽은 작게 설정한 경우이지만 위 Layout 속성을 사용한 UI는 동일한 크기를 보여주고 있음을 알 수 있습니다.

모든 UI가 시스템 설정을 무시하고 동일한 Layout을 유지해야 하는건 아니지만 그렇게 해야 하는 경우가 반드시 있고 이를 구현하기 위해서는 이 글에서 설명하는 것과 같이 InheritedWidget을 사용하는게 가장 자연스러웠습니다.

혹시 더 좋은 다른 방법이 있으면 알려주시면 감사하겠습니다.

향후에는 저는 모든 UI를 완벽히 동일하게 하는건 아니고 필요한 부분만 적용하고 max와 min을 설정할 수 있도록 하여 시스템 설정이 단말기의 UI구성 전체를 깨뜨리지 않는 선에서 설정이 적용되도록 할 예정입니다.

이번 글에서 언급했듯이 현재 UI를 Flutter답게 개선하고 있습니다.

Flutter는 Native급의 UI구성에 대한 자유도와 성능에 큰 장점이 있습니다.