Flutter Root Context Menu

개요

Flutter Root Context Menu는 Flutter 앱에서 웹 브라우저와 유사한 컨텍스트 메뉴(우클릭 메뉴)를 손쉽게 구현할 수 있는 패키지입니다. 기본 Flutter의 showMenu나 PopupMenuButton이 제공하지 않는 세밀한 위치 제어, 다양한 애니메이션, 커스텀 위젯 아이템 등을 지원하여, 데스크톱·웹 환경에서 네이티브에 가까운 컨텍스트 메뉴 경험을 제공합니다.

주요 기능

• 수동 트리거 방식: showRootContextMenu()로 원하는 위치와 타이밍에 메뉴를 직접 제어
• 8가지 빌트인 애니메이션: popup, fade, slideUp, slideDown, slideRight, bounce, scale, none + 커스텀 애니메이션 지원
• 커스텀 위젯 아이템: ContextMenuItem.custom()으로 Switch, Checkbox, Slider 등 인터랙티브 위젯을 메뉴 안에 배치 가능
• 유연한 스타일링: 배경색, 호버 색상, 테두리 반경, 그림자, 아이템 간격 등 세밀한 커스터마이징
• 스마트 포지셔닝: 화면 경계를 자동 감지하여 메뉴가 화면 밖으로 넘치지 않도록 처리
• 영역 제한: ContextMenuArea로 메뉴가 열릴 수 있는 영역을 제한
• 라우트 변경 시 자동 닫기: ContextMenuRouteObserver로 페이지 이동 시 메뉴 자동 정리
• 비동기 콜백 지원: onTap에서 async 작업을 안전하게 처리

지원 플랫폼

Android, iOS, Web, macOS, Windows, Linux

기술적 특징

• Overlay 기반 렌더링: 위젯 트리 최상단의 Overlay에 메뉴를 삽입하여 어떤 위젯 위에서도 메뉴가 정상적으로 표시됩니다. 부모 위젯의 clipBehavior나 overflow에 영향을 받지 않습니다.
• 외부 의존성 제로: Flutter SDK 외에 어떤 외부 패키지에도 의존하지 않아 프로젝트 의존성 트리를 깔끔하게 유지할 수 있습니다.
• 웹 친화적 클릭 동작: 메뉴 외부를 클릭하면 메뉴가 닫히는 동시에 해당 위젯의 이벤트가 정상적으로 전달됩니다. 두 번 클릭할 필요 없이 한 번의 클릭으로 처리됩니다.
• 커스텀 애니메이션 확장: 빌트인 애니메이션 외에도 AnimationBuilder 타입을 통해 직접 애니메이션 로직을 정의할 수 있어 확장성이 뛰어납니다.

왜 주목할까?

Flutter에서 컨텍스트 메뉴를 구현하려면 보통 showMenu를 사용하거나 직접 Overlay를 다뤄야 합니다. 전자는 커스터마이징이 제한적이고, 후자는 보일러플레이트가 많습니다. flutter_root_context_menu는 이 간극을 메워주는 패키지로, 한 줄의 함수 호출만으로 애니메이션이 적용된 스타일리시한 컨텍스트 메뉴를 띄울 수 있습니다.

특히 외부 의존성이 전혀 없다는 점은 패키지 도입 시 의존성 충돌 걱정을 줄여주며, Switch·Checkbox 같은 인터랙티브 위젯을 메뉴 아이템으로 넣을 수 있는 custom() 빌더는 설정 패널이나 필터 메뉴 같은 실무 시나리오에서 유용합니다. 데스크톱·웹 Flutter 앱을 개발하는 프로젝트에서 네이티브 수준의 컨텍스트 메뉴 UX가 필요하다면 검토해볼 만한 패키지입니다.