Flutter Dropdown Button

개요

Flutter Dropdown Button은 Flutter의 기본 DropdownButton이 제공하지 못하는 세밀한 커스터마이징과 오버레이 기반 렌더링을 지원하는 드롭다운 위젯 패키지다. 하나의 통합된 FlutterDropdownButton<T> 위젯으로 커스텀 위젯 렌더링과 텍스트 전용 모드를 모두 커버하며, 스마트 포지셔닝으로 화면 공간에 따라 자동으로 열리는 방향을 조정한다.

주요 기능

• 단일 통합 위젯: FlutterDropdownButton<T> 하나로 커스텀 위젯 모드와 텍스트 전용 모드(.text()) 모두 지원
• 오버레이 기반 렌더링: OverlayEntry를 활용한 정밀한 위치 제어와 시각 효과
• 스마트 포지셔닝: 화면 하단 공간이 부족하면 자동으로 위쪽으로 열림
• 독립적 메뉴 너비: 버튼과 별도로 메뉴 너비 설정 가능, 정렬 옵션(좌/중/우) 제공
• 스마트 툴팁: 텍스트 오버플로우 시 자동 툴팁 표시, 풀 커스터마이징 지원
• 커스텀 스크롤바: 스크롤바 색상, 두께, 가시성 등 세밀한 테마 설정
• 단일 아이템 모드: 옵션이 하나일 때 자동 비활성화
• 부드러운 애니메이션: Scale/Fade 효과와 설정 가능한 타이밍

스크린샷

지원 플랫폼

Flutter가 지원하는 모든 플랫폼에서 동작한다: Android, iOS, Web, macOS, Windows, Linux.

기술적 특징

• OverlayEntry 기반 아키텍처: Flutter 기본 DropdownButton은 Navigator를 통해 새 Route를 push하는 방식이지만, 이 패키지는 OverlayEntry를 직접 사용한다. 이를 통해 드롭다운 위치를 버튼 바로 아래/위에 정확히 배치하고, 애니메이션 제어권을 완전히 확보했다.
• 스마트 포지셔닝 알고리즘: calculateDropdownPosition() 메서드에서 화면의 상/하 여유 공간을 계산하여 최적의 열림 방향과 높이를 동적으로 결정한다. Safe area(상태바, 내비게이션바)까지 고려한다.
• DropdownMixin 패턴: 공통 로직(위치 계산, 애니메이션 관리, 오버레이 생명주기, 외부 탭 감지)을 Mixin으로 추출하여 코드 중복을 제거했다.
• 3계층 테마 시스템: DropdownStyleTheme이 DropdownTheme(일반 스타일링), DropdownScrollTheme(스크롤바), DropdownTooltipTheme(툴팁)을 묶어 일관된 스타일링을 제공한다.
• 외부 의존성 제로: Flutter SDK 외에 어떤 서드파티 패키지도 사용하지 않는다.

왜 주목할까?

Flutter의 기본 DropdownButton은 커스터마이징에 한계가 많다. 오버레이 위치를 세밀하게 제어하기 어렵고, 아이템별 스타일링이나 메뉴 너비 독립 설정 같은 기능이 없다. flutter_dropdown_button은 이런 실무에서 자주 부딪히는 문제들을 해결하면서도, 외부 의존성 없이 Flutter SDK만으로 구현했다는 점이 인상적이다. 하나의 위젯(FlutterDropdownButton<T>)으로 통합된 API는 학습 비용을 줄이면서도 커스텀 위젯 렌더링부터 텍스트 전용 모드까지 유연하게 대응한다.