[Flutter] ListView는 안 가려지는데 다른 위젯들은 AppBar에 가려질 때

새 화면의 레이아웃을 잡으려고 하는데,

scaffold 의 body 에 넣은 위젯이 앱바에 계속 가려지는 현상이 발생했다.

그런데 이상하게 ListView 위젯을 넣으면 앱바에 가려지지 않았다.

Column 위젯에 Container 위젯을 넣었을 때

앱바 색을 반투명하게 해보니 앱바 뒤에 위젯이 위치한다.

그런데 ListView 위젯을 이용할 땐 또 멀쩡하다.

 

이 현상의 원인은 바로 Scaffold 의 extendBodyBehindAppBar 속성이었다.

이 속성이 true 로 설정되어 있으면 말 그대로 body 에 들어가는 위젯이 AppBar 영역과 분리되지 않고 AppBar 부분까지 확장되면서 AppBar 가 Body 위로 겹쳐져 올라오게 된다.

 

그렇다면 왜 ListView 위젯은 이 속성의 영향을 받지 않았던 걸까?

그 답은 ListView 공식 문서에 나와있었다.

미디어쿼리의 패딩값에 따라 자동으로 자신의 패딩값을 설정해서 발생하는 문제라고 한다.

해결책은 ListView 내의 padding 속성을 통해 패딩값을 0으로 넣어주면 된다.

이런식으로 해주면 된다.

그러면 이렇게 ListView도 정상적으로 앱바에 숨겨지게 된다.

 

https://stackoverflow.com/questions/50032231/how-to-display-body-under-the-appbar-of-scaffold-widget-and-not-below

How to display body under the AppBar of scaffold widget and not below?

이 질문글의 채택 답변 댓글들을 참고하면 된다.