[Flutter, zeplin] 버튼 크기 설정하기(dp)

처음으로 막힌 문제는 Zeplin에 나와있는 디자인을 어떻게 그대로 만드는 가였습니다.

Zeplin에서는 크기의 값들은 전부 dp로 나와있었습니다.

이것에 대해 알아본 결과(https://points.tistory.com/66) Android에서 사용하는 픽셀 단위이고, 그 크기는 Flutter에서 사용하는 Logical Pixel 단위와 다르지 않다는 사실을 알게 되었습니다.

그래서 Zeplin에 나와있는 값을 그대로 넣었는데, 똑같은 디자인이 나오지 않았습니다.

알고보니, Zeplin상의 디스플레이 크기와 AVD상의 디스플레이 크기가 달라서 나오는 문제였습니다.

그래서 생각한 방법이 Zeplin상의 비율을 구해서 앱에 적용하는 것이었습니다.

 

사용한 핵심 코드는 width,height를 구하는데 사용한 다음의 코드입니다.

double width = MediaQuery.of(context).size.width;

Zeplin에서 구한 비율을 AVD상의 값에 적용해서 상수로 크기를 정하게 되면 크기가 다른 디바이스에선 또 크기가 깨질 것 같아서 크기를 변수로 선언해서 해당 값을 비율만큼 줄이는 방향으로 진행했습니다.