Flutter 프로젝트 '남음' - Bottom sheet 구현하기

현재 내 주변에 어떤 가게들이 있는지 확인하기 위해 Google map을 사용합니다.

Google map위에 있는 Marker를 클릭하거나, sheet을 드래그하면 화면의 하단에서 sheet이 올라오게 구현 할 예정입니다.

(Marker를 클릭하는 것은 간단하니 우선 드래그를 구현해봅니다)

 

 

우선 Google map이 있는 tab을 Stack으로 감싸줍니다. 그래야 Positioned를 사용해 bottom에 sheet를 위치 시킬 수 있습니다.

 

24 line이 우리가 구현 할 위젯입니다.

MapBottomSheet은 StatefulWidget으로 설정합니다. BottomSheet을 AnimatedContainer로 구현 할 것이기 때문에 state가 필요합니다.

기본 동작은 다음과 같습니다. Bottom sheet을 드래그 하여 높이가 100 ~ 500 사이이면 높이를 600으로 설정합니다. 그리고 다시 유저의 드래그로 500 ~ 550 사이로 들어오면  높이를 100으로 설정합니다.

 

AnimatedContainer의 onEnd에서 _longAnimation에 대한 처리를 꼭 해줘야 정상적으로 작동합니다.

 

가게 정보들이 해당 AnimatedContainer에 들어오는 건 곧 포스팅 합니다.