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);

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール