SafeArea

SafeArea란?

Flutter에서 SafeArea는 화면의 가장자리를 기준으로 자식 위젯이 화면에 나타나는 영역을 제한하는 위젯입니다. 기본적으로 SafeArea는 안전한 영역 내에서만 자식 위젯을 그리며, 이를 통해 화면의 경계선에 UI 요소가 가려지지 않도록 보호합니다.

안전한 영역은 화면의 가장자리에 있는 시스템 UI 요소(예: 네비게이션 바, 상태 바, 시계 등)가 차지하는 영역을 의미합니다. SafeArea를 사용하면 자식 위젯이 안전한 영역을 초과하지 않도록 제한할 수 있습니다.

예를 들어, 아이폰 X 이상의 모델에서는 상태 바와 하단 네비게이션 바가 디스플레이의 일부를 차지하므로, SafeArea를 사용하여 UI 요소가 이러한 시스템 요소에 가려지지 않도록 할 수 있습니다.

SafeArea는 일반적으로 Scaffold 위젯 내에서 사용되며, 다음과 같은 방법으로 사용할 수 있습니다.

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: SafeArea(
    child: Text('Hello World!'),
  ),
);

위 예제에서는 SafeArea의 자식 위젯으로 Text 위젯을 사용하고 있습니다. 이 경우, Text 위젯은 안전한 영역 내에서만 그려지므로 시스템 UI 요소와 겹치지 않습니다.

 

---

SafeArea를 안쓰면?

SafeArea를 사용하지 않으면, 화면의 가장자리 부분에 시스템 UI 요소(예: 네비게이션 바, 상태 바 등)가 있는 경우, 자식 위젯이 이 영역과 겹쳐서 UI 요소가 가려지는 문제가 발생할 수 있습니다.

이 문제는 특히 iOS 기기의 경우, iPhone X 이상 모델에서 자주 발생합니다. iPhone X 이상 모델은 디스플레이의 상단과 하단에 노치와 홈 바가 있기 때문에, UI 요소가 이 부분과 겹치면 사용자 경험에 나쁜 영향을 미칩니다.

SafeArea를 사용하지 않은 경우, 시스템 UI 요소와 겹치는 UI 요소를 볼 수 있으며, 일부 UI 요소가 사용자가 원하는 대로 동작하지 않을 수 있습니다. SafeArea를 사용하여 UI 요소를 안전한 영역 내에 제한하면, 이러한 문제를 방지할 수 있습니다.