SafeArea class
운영 체제의 침입을 피하기 위해 충분한 패딩으로 자식 위젯을 삽입하는 위젯입니다.
https://www.youtube.com/watch?v=lkF0TQJO0bA
공식 문서 코드
SafeArea 는 앱을 구성할 때 빠질 수 없는 중요 위젯이다.
어떠한 역할을 수행하는가 하면 바로 앱을 화면의 가장자리로부터 패딩을 띄워주는 역할을 한다.
이는 굉장히 중요한 역할을 하는 것인데 우리가 만든 앱이 화면에 가려져 보이지 않는 불상사를 방지해 준다.
공식 문서의 예제를 보면 굉장히 복잡한 것 같지만 사실 우리는 그냥 하나만 알면 된다.
SafeArea(
child: Container(),
)
그냥 SafeArea 위젯으로 씌워주기. 끝이다.
SafeArea는 웹이나 dartpad 로 실행하면 "이게 뭘까?" 싶기도 할 거다.
하지만 이 친구의 진가는 애뮬레이터, 즉 실제 디바이스에서 드러난다.
이렇게 코드를 작성했다고 해보자.
결과가 예상이 가는가?
결과물은 이렇다.
아마 생각했던 것과는 조금 다르게 나왔을 것이다.
허나 여기서 SafeArea 를 씌워준다면 어떻게 될까?
그렇다. 쉽게 말하면 위의 상태 표시줄의 크기만큼 패딩을 띄워서 정상적으로 자식 위젯이 표시되게 해주는 역할인 것이다.
이렇듯 SafeArea 는 상태 바, 노치, 홈 인디케이터 같은 모바일 기기의 시스템 UI 에 디자인 영역이 가려지는 것을 방지해 준다.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| left | bool | true | 왼쪽에서 시스템 침입을 피할 것인지 여부 |
| top | bool | true | 위에서 시스템 침입을 피할것인지 여부 |
| right | bool | true | 오른쪽에서 시스템 침입을 피할것인지 여부 |
| bottom | bool | true | 아래에서 시스템 침입을 피할것인지 여부 |
| minimum | EdgeInsets | EdgeInsets.zero | 각 방향에 대한 패딩 최소치 지정 |
| maintainBottomViewPadding | bool | false | 키보드 등으로 인해 아래쪽 패딩이 사라지는 상황에서 원래의 패딩을 유지할지 여부 |
이렇게 오늘은 SafeArea 에 대해서 알아보았다.
시스템 UI 에 내가 디자인 한것들이 가려지면 상당히 그렇기에 항상 신경을 써야 하는 부분이라고 생각을 한다. 도움이 되었길 바라고 상황에 따라 잘 사용하길 바라며 마치겠다.
