[Flutter] 오버레이로 자동 완성 검색창 만들기

• 플러터에서는 Overlay 위젯을 사용해 검색바와 자동완성 키워드 목록을 단일 위젯으로 분리시킬 수 있다. Overlay는 Stack의 일종으로, Overlay에게 전달된 child 위젯은 각각 독립적인 상태를 가지며 UI상에서 마치 떠있는 것처럼 보여진다.

• Overlay에 위젯을 추가하려면 OverlayState의 멤버 함수인 'insert'를 사용해야 하며, 이를 통해 개발자는 Overlay의 children을 원하는 시점에 보여줄 수 있다. 추가된 위젯은 'OverlayEntry.remove'로 제거할 수 있다.

• Flutter에서 OverlayEntry를 사용하여 위젯을 스택처럼 보여줄 수 있으며, 이를 통해 검색바와 키워드 목록을 분리하여 독립적으로 동작하게 할 수 있다. 하지만 스크롤 시에도 검색바와 키워드 목록이 분리되지 않고 함께 움직이는 UI를 구현하기 위해서는 추가 작업이 필요하다.

• CompositedTransformTarget과 CompositedTransformFollower를 사용하여 위젯을 연결하면, follower 위젯이 target 위젯을 따라다니게 할 수 있다. 이를 위해 LayerLink를 사용하여 target과 follower를 등록하고, follower의 offset을 통해 상대적인 위치를 정할 수 있다. 이를 통해 검색바와 키워드 목록이 함께 움직이는 UI를 구현할 수 있다.