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

パッケージ詳細v0.0.2

spear_menu

Flutter用の矢印ドロップダウンメニュー用プラグイン。iOSおよびAndroidをサポートしています。

30日間ダウンロード
12
いいね数
38
Pub ポイント
40

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

flutter pub add spear_menu

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Spear Menu は、槍のようなアニメーション効果を備えた洗練されたカスタマイズ可能なドロップダウンメニューを提供するFlutterプラグインです。iOSおよびAndroid向けに設計されており、スムーズなトランジションとモダンなビジュアルでユーザーインタラクションを強化します。既存のFlutterアプリに簡単に統合でき、開発者がオプションを視覚的に魅力的に提示できるようにします。`flutter pub add spear_menu` による最小限のセットアップで、レスポンシブデザインをサポートし、さまざまなUI要件に合わせてカスタマイズ可能です。フォームや設定、またはエレガントな選択メカニズムが必要な任意のインターフェースに最適です。

用途

  • モバイルアプリでのドロップダウン選択
  • フォーム入力の強化
  • 設定メニュー
  • カスタマイズ可能なUIコンポーネント
  • インタラクティブなナビゲーション要素

主な機能

  • 槍型アニメーション効果
  • クロスプラットフォーム対応(iOSおよびAndroid)
  • Flutter との簡単な統合
  • カスタマイズ可能な外観
  • レスポンシブデザインの互換性

適している対象

  • モバイルアプリ開発者
  • UI/UXデザイナー
  • Flutter ビギナー
  • アニメーション付きドロップダウンを必要とするアプリ
  • モダンなビジュアルテーマを持つプロジェクト

注意事項

  • モバイルプラットフォームに限定
  • Flutterレイアウトの理解が必要です
  • アニメーションは低スペックデバイスのパフォーマンスに影響を与える可能性があります
  • Webまたはデスクトップサポートについて言及されていません
  • カスタムスタイルには追加のコードが必要です

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Flutter Spear Menu

Usage

A spear dropdown menu plugin. The Spear Menu widget is built to be below placed in the button or Icon widget, replacing the FloatingActionButton widget. it's possible to set anywhere in scaffold.

alt text

Example Usage (complete with all params):

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

First, you should set the context at somewhere in you code. Like below:

PopupMenu.context = context;
import 'package:flutter/material.dart';
import 'package:popup_menu/popup_menu.dart';
import 'CustomData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Popup Menu Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PopupMenu menu;
  GlobalKey btnKey = GlobalKey();
  List<CustomData> menuList = new List<CustomData>();

  @override
  Widget build(BuildContext context) {
    PopupMenu.context = context;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.topLeft,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              child: MaterialButton(
                height: 10.0,
                key: btnKey,
                onPressed: menuData,
                child: Icon(Icons.menu,),
              ),
            )
          ],
        ),
      ),
    );
  }

  void menuData() {
    if(menuList.isEmpty){
      menuList.clear();
      menuList.add(CustomData('Copy', false));
      menuList.add(CustomData('Power', false));
      menuList.add(CustomData('Setting', true));
      menuList.add(CustomData('PopupMenu', false));
    }

    List<MenuItemProvider> setData = new List<MenuItemProvider>();
    setData.clear();
    for(var io in menuList){
      print("Result : " + io.name);
      setData.add(MenuItem(title: io.name, isActive: io.isShow));
    }

    PopupMenu menu = PopupMenu(
        //backgroundColor: Colors.teal,
        // lineColor: Colors.tealAccent,
        items: setData,

        onClickMenu: onClickMenu,
        stateChanged: stateChanged,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey);
  }

  void onClickMenu(MenuItemProvider item) {
    menuList.map((element) {
      if(item.menuTitle == element.name){
        element.isShow = true;
      }else{
        element.isShow = false;
      }
    }).toList();

    print('Click menu -> ${item.menuTitle}');
  }

  void stateChanged(bool isShow) {
    print('menu is ${isShow ? 'showing' : 'closed'}');
  }

  void onDismiss() {
    print('Menu is dismiss');
  }

}

Issues & Feedback

Please file an issue to send feedback or report a bug. Thank you!

Contributing

Every pull request is welcome.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。