搜索插件、代码仓与 APP 分类

插件详情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布局
  • 动画可能会影响低端设备的性能
  • 未提及网页或桌面端支持
  • 自定义样式需要额外的代码

原始 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。