① 배운 것
LayoutBuilder 를 사용해 해상도가 다른 디바이스에서 위젯 짤림 해결하기
문제 상황
위젯 설명
이미지가 노란 캐러샐 영역에 들어가고 그 안에 하늘색의 footer 영역이 있다.
footer 안에는 좌측은 텍스트 우측은 버튼이 있다.
전제 - 너비를 임의로 지정하지 않는다.
캐러샐은 비율로 알잘딱깔센하게 들어가기 때문에 디바이스마다 캐러셀의 너비가 다 다르다.
그렇기 때문에 임의로 width를 지정한다면 오히려 디바이스 마다 위젯이 짤리거나 크기가 너무 다르게 보일 확률이 높았다.
그래서 캐러셀이나 기타 내부 위젯에 너비를 임의로 지정하지 않아야 했다.
문제 - zFlip에서 텍스트 크기가 크게 보여서 텍스트 영역이 넓게 잡히고 우측 버튼이 overflow된다.
다른 폰에서는 괜찮았는데 유독 zFlip4에서만 해당 현상이 발생했다.
앱은 textScaler 고정, 해당 위젯은 logical pixel로 위젯을 개발했음에도 폰 해상도에 따라 위젯이 정확히 모두 같은 사이즈로 보이는건 아니기에 해당 문제가 발생했다.
해결 - layoutBuilder를 이용해 텍스트 영역을 하늘색 footer 영역 너비의 0.7로 잡고, 영역에 맞추어 글자가 작아지게 구현함
디자이너분과 이야기한 결과 텍스트 영역을 고정시키고 글자를 텍스트 영역에 맞추어 사이즈를 조정하는 방식으로 구현하기로 했다.
그래서 하늘색 footer container child로 layoutBuilder를 만들고, layoutBuilder builder()의 constraints를 이용해 최대 너비에 제약을 둔 ConstrainedBox안에 FittedBox로 감싼 Text를 만들어서 해결했다.
layoutBuilder는 부모의 최대 사이즈를 bulider()함수의 constraints으로 가져오기 때문에 부모 크기에 맞추어 하위 위젯의 크기를 정하려면 layoutBuilder를 사용하는것이 적절하다.
//이런 느낌
LayoutBuilder(
builder: (context, constraints) => Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(
//부모위젯(하늘색 footer) 너비의 0.7만큼을 텍스트 영역으로 잡음
maxWidth: constraints.maxWidth * 0.7,
),
//해댱 영역에 맞추어 글자크기 조정
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
description,
),
),
),
const Spacer(),
Button(),
],
),
),MediaQuery.of(context).size.width는 왜 적절하지 않은가?
MediaQuery.of(context).size.width는 부모위젯(여기서는 하늘색 footer)이 아니라 전체 화면 사이즈의 너비를 가져온다.
여기서는 전체 화면 사이즈에 비례한 제약이 아니라 부모(하늘색 footer)를 기준으로 삼은 제약을 걸어야 하기 때문에 MediaQuery를 활용하여 텍스트 영역에 제약조건을 주는 것은 옳지않다.
② 회고 (restropective)
layoutBuilder를 공부하면서도 이걸 어디다 써먹지 라고 생각했는데 적절하게 써먹은것 같아 뿌듯하다. 그리고 임의로 어떠한 너비나 높이를 지정하지 않고 디바이스 별로 위젯을 유연하게 구현했다는 점에 의의가 있다.
③ 개선을 위한 방법
