Flutter SafeArea Widget 자세히 알아보기
화면을 개발하다 보면 노치(Notch) 디자인이나 디스플레이 곡면에 의해 화면이 잘리는 현상이 종종 있습니다. Flutter에서는 이런 문제를 해결하기 위해 SafeArea 위젯을 만들었습니다. SafeArea를 사용하는 이유와 구현 로직을 살펴보고 사용방법까지 알아보도록 하겠습니다.
SafeArea 사용하는 이유
SafeArea는 디바이스 특성으로 인해 운영체제에서 뷰의 영역을 침범하는 것을 막기 위해 만들어진 위젯입니다. 보통 노치 디자인이나 곡면 디자인이 들어간 디스플레이를 사용하는 디바이스에서 영역이 침범하는 문제가 발생합니다. 이때 SafeArea를 통해 자식 뷰에 영역이 침범당하는 것을 방지할 수 있습니다.
 |
| SafeArea 적용 전 |
 |
| SafeArea 적용 후 |
SafeArea 내부 구현
SafeArea는 left, top, right, bottom을 설정하여 보호할 영역을 부분을 설정할 수 있고, minimum을 통해 최소 padding값을 설정할 수 있습니다. padding값은 build() 함수에서 계산됩니다. 자신이 설정한 상하좌우 영역에 minimum padding과 시스템에 의해 보호해야 할 padding 중 더 큰 padding 값을 구합니다. 그리고 MediaQuery.removePadding을 통해 지정된 padding을 삭제하고 새 padding 위젯을 삽입합니다.
SafeArea 예제
SafeArea는 child에 자신이 원하는 위젯을 삽입하면 됩니다.
댓글
댓글 쓰기