cupertino-menu-context-menu
Use when implementing iOS-style contextual popup menus and action lists anchored to specific widgets or navigation bar buttons using cupertino_menu.
소스 정보
- 저장소
- mono0926/cupertino_menu
- 최근 소스 활동
- 2026년 9월 9일 03:11
- 감지된 SKILL.md 언어
- 영어
- 스타
- 3
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- cupertino_menu-context-menu
- description
- Use when implementing iOS-style contextual popup menus and action lists anchored to specific widgets or navigation bar buttons using cupertino_menu.
# cupertino_menu Context Menu Guide
`cupertino_menu` renders iOS-style contextual pop-up menus (introduced in iOS 14). It opens with smooth scaling transitions anchored directly to the triggering button.
## Guidelines
- **Portal Host Requirement**:
- `cupertino_menu` relies on `flutter_portal` for rendering overlay portals. Ensure `Portal` wraps your root app widget (e.g. above or inside `MaterialApp` / `CupertinoApp`).
- **Triggering Menus**:
- Replace standard popup buttons with `CupertinoPopupMenuButton(actions: [...])`.
- Provide a list of `CupertinoPopupMenuButtonAction` objects containing titles, optional icons, and `onPressed` callbacks.
- **Handling Action Callbacks**:
- Each `CupertinoPopupMenuButtonAction.onPressed` is triggered when tapped, and the popup automatically dismisses itself.
- **Device Rotation**:
- The menu automatically listens to `MediaQuery.of(context).orientation` and dismisses on device rotation to avoid misaligned anchors.
## Examples
### 1. Basic Setup with Root Portal
```dart
import 'package:cupertino_menu/cupertino_menu.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_portal/flutter_portal.dart';
void main() {
runApp(
const Portal(
child: CupertinoApp(
home: HomeScreen(),
),
),
);
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: const Text('Cupertino Menu'),
trailing: CupertinoPopupMenuButton(
actions: [
CupertinoPopupMenuButtonAction(
title: const Text('View Profile'),
onPressed: () => debugPrint('Navigate to profile'),
),
CupertinoPopupMenuButtonAction(
title: const Text('Settings'),
onPressed: () => debugPrint('Navigate to settings'),
),
CupertinoPopupMenuButtonAction(
title: const Text('Logout', style: TextStyle(color: CupertinoColors.destructiveRed)),
onPressed: () => debugPrint('Logout pressed'),
),
],
),
),
child: const Center(
child: Text('Tap the top-right button for menu'),
),
);
}
}
```
## Common Pitfalls & Anti-Patterns
- ❌ **Anti-pattern**: Forgetting to add `Portal` in the widget hierarchy, causing `PortalEntry` errors at runtime.
- ✔️ **Correct**: Wrap `CupertinoApp` or `MaterialApp` inside `Portal`.
- ❌ **Anti-pattern**: Manually calling `Navigator.pop()` inside `CupertinoPopupMenuButtonAction.onPressed`.
- ✔️ **Correct**: Do not call `Navigator.pop()`; the button action handles closing the menu internally.
GitHub에서 보기