이미지 비율 맞추기

MediaQuery

flutter에서 화면 크기를 얻기위해 MediaQuery 클래스 사용
MediaQuery클래스에는 화면 크기 외에도 여러가지 기기의 시스템 정보들을 담고있다.(텍스트 배율, 24시간 포맷 유무, 기기 방향(orientation)등등)

MediaQuery.of(context).size             //앱 화면 크기 size  Ex> Size(360.0, 692.0)
MediaQuery.of(context).size.height      //앱 화면 높이 double Ex> 692.0 
MediaQuery.of(context).size.width       //앱 화면 넓이 double Ex> 360.0
MediaQuery.of(context).devicePixelRatio //화면 배율    double Ex> 4.0
MediaQuery.of(context).padding.top      //상단 상태 표시줄 높이 double Ex> 24.0

위의 값들은 실제 픽셀 값이 아닌 논리적 픽셀 값이므로 실제 픽셀 값을 구하려면 화면 배율을 곱하면됨
ex)

MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio//화면 너비의 실제 픽셀 값

---

BoxFit

AssetImage를 사용하여 이미지를 출력할때 fit속성을 통하여 이미지 크기 및 비율을 조절

• BoxFit.contain : 이미지 비율을 왜곡시키지 않으면서 Parent 위젯의 범위에 맞게 최대로 확대하여 출력
• BoxFit.cover : 이미지 비율을 왜곡시키지 않으면서 Parent 위젯을 전부 채울수 있을 정도로만 축소하여 출력
• BoxFit.fill : 이미지를 Parent 위젯의 범위에 가득 채우는 것을 의미하며, 필요한 경우 이미지 비율을 변형해서 출력
• BoxFit.fitHeight : Parent 위젯의 높이에 이미지의 높이를 그대로 맞추는 것을 말하며, 이미지의 비율을 손상시키지 않음
• BoxFit.fitWidth : Parent 위젯의 머비에 이미지의 너비를 그대로 맞추는 것을 말하며, 이미지의 비율을 손상시키지 않음
• BoxFit.scaleDown : Parent 위젯의 범위에 맞게 이미지의 크기를 줄여서 출력하지만 이미지의 비율을 손상시키지 않음
• BoxFit.none : Patent 위젯의 범위 안에 이미지를 정렬하고 이미지가 만약 Parent 위젯의 범위를 초과하는 경우 그 벗어난 부분을 모두 무시하고 출력

ex)

decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(image),
            fit: BoxFit.fitWidth,
          ),
        ),

참조
하이제니스
Totally개발자