popup_menu_plus

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

popup_menu_plus는 Dart로 완전히 구현된 사용자 정의 가능한 팝업 메뉴 위젯을 제공하는 Flutter 패키지입니다. iOS 및 Android에서 네이티브와 유사한 기능을 제공하며 Web, macOS, Windows, Linux 등 여러 플랫폼을 지원합니다. 탭이나 제스처를 통해 트리거되는 컨텍스트 민감한 메뉴를 통해 사용자 상호작용을 향상시킵니다. 가볍고 통합이 쉬우며 현대적인 Flutter 실천과 호환됩니다. 개발자는 사용자 지정 항목과 스타일 옵션으로 동작을 확장할 수 있습니다.

사용 사례

앱 내 컨텍스트 작업
사용자 설정 메뉴
드롭다운 스타일 탐색
양식용 사용자 정의 팝업
플랫폼 일관성 있는 UI 요소

주요 기능

크로스 플랫폼 호환성
완전히 Dart로 작성됨
제스처 트리거를 지원합니다
확장 가능한 아이템 사용자 정의
가볍고 성능이 뛰어남

적합한 대상

다중 플랫폼 앱을 개발하는 개발자
일관된 메뉴 UI가 필요한 팀
컨텍스트 액션 메뉴가 필요한 앱
강한 성능 제약이 있는 프로젝트
UI 중심 애플리케이션

고려 사항

메뉴 위치 조정을 수동으로 처리해야 합니다
제한된 내장 테마 옵션
복잡한 상호작용을 위해 추가 로직이 필요할 수 있습니다
매우 큰 메뉴 항목에 최적화되지 않음
Flutter의 제스처 시스템에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Popup Menu Plus

This project is a fork of chinabrant/popup_menu.

This project was written completely in dart, and it supports both iOS and Android.

Screenshots

Todo

[ ] show/hide animation

Usage

You can find the demo at the 'example' folder.

PopupMenu menu = PopupMenu(
      context: context,
      config: const MenuConfig(
        backgroundColor: Colors.green,
        lineColor: Colors.greenAccent,
        highlightColor: Colors.lightGreenAccent,
      ),
      items: [
        PopUpMenuItem(title: 'Copy', image: Image.asset('assets/copy.png')), 
        PopUpMenuItem(title: 'Home', image: Icon(Icons.home, color: Colors.white,)), 
        PopUpMenuItem(title: 'Mail', image: Icon(Icons.mail, color: Colors.white,)), 
        PopUpMenuItem(title: 'Power', image: Icon(Icons.power, color: Colors.white,)),
        PopUpMenuItem(title: 'Setting', image: Icon(Icons.settings, color: Colors.white,)), 
        PopUpMenuItem(title: 'Traffic', image: Icon(Icons.traffic, color: Colors.white,))], 
      onClickMenu: onClickMenu, 
      onShow: onShow,
      onDismiss: onDismiss);

menu.show(rect: rect);

PopupMenu menu = PopupMenu(
        context: context,
        config: const MenuConfig(
            backgroundColor: Colors.green,
            lineColor: Colors.greenAccent,
            highlightColor: Colors.lightGreenAccent,
        ),
        items: [
          PopUpMenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
          PopUpMenuItem(
              title: 'Home',
              textStyle: TextStyle(fontSize: 10.0, color: Colors.tealAccent),
              image: Icon(
                Icons.home,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'Mail',
              image: Icon(
                Icons.mail,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'Power',
              image: Icon(
                Icons.power,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'Setting',
              image: Icon(
                Icons.settings,
                color: Colors.white,
              )),
          PopUpMenuItem(
              title: 'PopupMenu',
              image: Icon(
                Icons.menu,
                color: Colors.white,
              ))
        ],
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);

with custom content:

PopupMenu menu = PopupMenu(
        context: context,
        config: const MenuConfig(
            type: MenuType.custom,
            itemHeight: 200,
            itemWidth: 200,
            backgroundColor: Colors.green,
        ),
        content: Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);

패키지, 저장소 및 앱 카테고리 검색

패키지 설치