Flutter UI overflows 02

overflow 에러 화면 수정 실례

개발자 테스트 시에는 발견되지 않는 오류의 사례가 테스터에게서 또는 고객에게서 발생하곤 한다.
아래에 소개할 2개의 overflow와 관련해서는 회사 대표님이 테스트하다가 발생한 오류를 수정한 결과를 공유한다. 참고로 테스터는 눈이 노안인 관계로 폰의 설정을 아래와 같이 하여 사용하고 있었다.

Device	글자 크기와 스타일	화면 크게/작게
갤럭시 노트3

1. 공통 컴포넌트에서 Expand를 사용하지 않아서, overflow가 발생한 경우

[overflow 화면]

[수정 전, code]

1
2
3
4
5
6
7

...
SizedBox(
            width: width,
            height: height,
            child: image,
        );
...

[수정 후, code]

2. 기기의 화면 배율의 변경에 따라, overflow가 발생한 경우

[overflow 화면]

[수정 전, code]

1
2
3
4
5
6

..
SizedBox(
    width: 190,
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
...

[수정 후, code]

3. 모바일용 공통 뷰포트 Size

메타 뷰포트 값 width=device-width를 사용하면 페이지가 기기별 픽셀 단위로 화면 너비와 같도록 할 수 있음. 작은 휴대폰에서 렌더링되든 큰 데스크톱 모니터에서 렌더링되든 다양한 화면 크기에 맞게 콘텐츠를 다시 그릴 수 있게됨. 따라서 기기별 viewport값을 참조하여 UI 코딩시 참조할 수 있도록 함.

Apple Devices

Android Devices

4. 결론

사용자의 mobile 환경 설정에 따라서, viewport size의 크기가 변경되게 됨. responsive하게 기능을 제공하기 위해서는, 사용자의 mobile 셋팅과 관련한 설정을 변경하여서 테스트가 필요함. 즉, 폰트사이즈 최대/최소, 화면배율 최대/최소로 UI 테스트 진행 필요.