Flutter, 모든 기기에서 UI를 표현하자!

우리 Flutter는,, 바깥으로 나가는 걸 참 좋아하는 아이입니다. 

 

자기 마음대로 화면 밖으로 나가기 좋아하는 flutter widget들

 

혼자 밖으로 나가놓고는, debug일 때 저렇게 표시를 발생시키죠,

 

휴대폰 마다 사이즈, 비율, 사용자가 설정한 폰트 크기 등이 각각 다르기 때문에, 

저런 overflow를 보게 되거나, widget 사이즈가 디자인처럼 나오지 않는 경우가 발생할 수 있습니다. 

 

https://pub.dev/packages/flutter_screenutil

flutter_screenutil | Flutter Package

혹자는 flutter_screenutil 을 추천하지만 완전한 대응책이 되기 어려울 뿐더러, 외려, 모두 확대하는 방식으로 widget들을 배치해버리면 UX측면에서 더 좋지 않은 영향을 끼칠 수 있습니다. 

예를 들어서 버튼이 있는데, 유저가 손가락으로 누를 수 있는 최소범위는 45px로 계산해서 버튼을 만들었습니다, 기기마다 화면 사이즈로 인해서 바뀌게 되면 더 이상하겠죠?, 이미지가 있습니다. 이 이미지를 화면이 큰 태블릿이 있을 경우, 이미지 사이즈로 맞출 수도 있고 화면 비율로 맞출 수도 있을 겁니다. 이런 경우에도 ScreenUtil을 사용하기 보다는 적절하게, 대응을 해주는 지혜가 필요하다고 생각합니다. 

 

이것은 제 생각이 아니라 flutter community에서 오랜 숙련자분들이 그렇게 생각해오는 방식입니다. ScreenUtil을 사용하는 것에 대해서는 의견이 분분한 것 같습니다.

 

암튼 

Flexible 의 Fit.loose, fit.tight

FittedBox를 사용하면, 어느정도 해결이 되는 부분인 것 같습니다. 

 

계속적으로 사용하면서 고정시킬 사이즈는 고정시키고 변화시킬 부분은 변화시키는게 맞겠습니다.