Flutter에서 스크롤 유무에 따라 하단 위젯 배치 방식 바꾸기

디바이스 크기에 맞춰 화면 조정하기

화면을 디자인하다 보면, 디바이스 크기에 맞게 화면 하단에 버튼을 배치해야 하는 경우가 있습니다. 그러나 초기 로딩하는 내부 컨텐츠의 길이가 길어지면, 컨텐츠 하단에 버튼을 배치해야 하는 상황도 고려해야 합니다. 이럴 때는 어떻게 해야 할까요?

예시

CustomScrollView와 slivers 활용하기

우선 최상위에 CustomScrollView를 배치하고 slivers 옵션 안에 SliverToBoxAdapter를 활용해서 영역들을 잡아줍니다. 그 후 남은 영역에 대해서 SliverFillRemaining를 사용해 위치를 잡아주는데 여기서 중요한 것은 SliverFillRemaining에 hasScrollBody: false 옵션을 주는 것입니다.(그렇지 않으면 스크롤이 넘어갈 경우 SliverFillRemaining가 한 화면을 채우게 됩니다.)

이렇게 설정하면 위 예시의 A/B 경우를 모두 커버할 수 있습니다.

말로 설명하기는 복잡하지만 아래 예시 화면을 보고 이해하실 수 있습니다.

CustomScrollView and slivers