animated_radial_menu

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個高度可自訂的徑向選單套件，適用於 Flutter，能以無需樣板程式碼的方式呈現複雜且流暢的動畫。它讓開發者能夠在多個平台上建立具有優雅徑向佈局的互動式浮動動作選單。此套件透過極少的設定簡化了動態、觸控反應式選單的實作，非常適合需要直覺導航或增強使用者互動的應用程式。該套件著重於效能與彈性，支援廣泛的自訂選項，包含動畫速度、項目定位與視覺風格。

適用情境

互動式應用導航
基於手勢的選單觸發
浮動操作介面設計
增強的使用者參與度
自定義 UI 組件
行動和桌面應用程式介面

主要特色

無需樣板程式碼
高度可定制
平滑的徑向動畫
跨平台支援
手勢響應式設計
輕鬆整合

適合對象

尋求簡潔UI模式的開發者
具有複雜導航需求的應用程式
注重設計的 Flutter 項目
跨平台應用程式
UI/UX優化工作

使用建議

可能需要在低階設備上進行效能調校
除了基本用法外，文件有限
自訂可能會增加初學者的複雜性
未針對非常大的選單項目進行優化
依賴Flutter動畫框架的穩定性

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

The package provides an easy way to work with radial menu along with animations.

example

You can check out the example here

Installation

To use this package : add the dependency to your pubspec.yaml file

   dependencies:
     flutter:
       sdk: flutter
     animated_radial_menu:

Basic Usage

Import it to your project file

  import 'package:animated_radial_menu/animated_radial_menu.dart';

Similar to column or row widget, simply pass in buttons as children and you are done

  RadialMenu(
     children: [
         RadialButton(
           icon: Icon(Icons.ac_unit),
           onPress: () => print("ac unit"),
         )
     ]
 ),

Eventhough you can use this widget anywhere, it's recommended to use RadialMenu with Stack Widget if your page contains tons of UI elements

     body: Stack(
          children: [
            RadialMenu(
              children: [
                RadialButton(
                  icon: Icon(Icons.ac_unit),
                  buttonColor: Colors.teal,
                  onPress: () => Get.to(TargetScreen())),
                RadialButton(
                    icon: Icon(Icons.camera_alt),
                    buttonColor: Colors.green,
                    onPress: () => Get.to(TargetScreen())),
                RadialButton(
                    icon: Icon(Icons.map),
                    buttonColor: Colors.orange,
                    onPress: () => Get.to(TargetScreen())),
                                 
                /* you can add any number of buttons, although it's 
                  not recommended to insert beyond 8-9 buttons. */
              ],
            ),
            
            // rest of the widgets....

          ],
        ),

You can manually position the widget wherever you wish

   RadialMenu(
    centerButtonAlignment: Alignment(0.3,0.5) // by default alignment is set to Alignment.center
   )

You can also customize the main centered button(more customizations will be made available soon)

   RadialMenu(
        centerButtonSize: 0.5, // size ranging from 0.0 to 1.0
   )

搜尋套件、儲存庫與 APP 分類