搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。