<플러터> iOS에서 SafeArea 적용으로 발생하는 하단 여백 색상 변경

 

🧭

 

SafeArea

플러터에서는 모바일 화면 상단의 상태바, iOS 하단의 노치 등의 공간을 제외하고 작업하기 위해 SafeArea 위젯을 사용합니다.

한편 전체를 차지하는 화면이 아닌 화면의 일부, 그 중에서도 하단의 일부를 차지하는 위젯에 SafeArea를 적용하는 경우 배경 색상이 원하는 색상이 아닌 경우가 있습니다.

전체 화면에 적용된 색상과 하단의 일부를 차지하는 해당 위젯의 배경 색상이 다른 경우에 SafeArea로 띄어진 하단의 노치 부분은 전체 화면의 배경 색상을 가지고 있을 것입니다.

하단의 일부를 차지하는 위젯의 배경 색상을 그대로 적용하기 위해서는

SafeArea로 감싼 부분을 다시 Container 위젯으로 감싸고, color 값을 원하는 색상으로 설정해 주면 됩니다.

 

📌

 

https://stackoverflow.com/questions/65609618/flutter-bottom-padding-color-on-iphone

Flutter bottom padding color on iPhone