animated_float_action_button

套件介紹

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

一個 Flutter 套件，可建立可摺疊的浮動操作按鈕菜單，讓使用者透過單一可擴展按鈕存取多個動作。它為 Android、iOS、Web、macOS、Windows 和 Linux 提供順暢的動畫與可自訂佈局。非常適合需要緊湊但易於存取的導航選項之應用程式。此套件支援動態新增按鈕，並可自訂外觀與行為。

適用情境

建立多動作浮動選單
提高UI空間效率
增強移動應用導航
設計互動式手勢介面
實現動畫操作面板
簡化對次要功能的存取

主要特色

平滑的展開/收合動畫
可自定義的按鈕佈局
對多平台的支援
動態按鈕管理
可設定的動畫持續時間
響應式觸控互動

適合對象

行動應用程式開發者
UI/UX 設計師
跨平台應用程式
具有複雜導航的應用程式
尋求優雅浮動按鈕的開發者
需要動畫使用者介面的專案

使用建議

按鈕過多時可能影響效能
需要仔細設計以確保可用性
動畫設定可能需要調整
不適合簡單的單動作需求
有限的內建主題選項
小螢幕上的潛在可存取性挑戰

原始 README

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

Getting Started

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

##Screenshots

Usage

To use this plugin:

In your flutter project add the dependency:

dependencies:
    ...
    animated_float_action_button: ^1.0.3

Example

//Import package
import 'package:animated_float_action_button/animated_floating_action_button.dart';
...
final GlobalKey<AnimatedFloatingActionButtonState> fabKey = GlobalKey();

Widget add() {
    return FloatActionButtonText(
      onPressed: (){
        fabKey.currentState.animate();
      },
      icon: Icons.add,
      text: "Ativar/Desativar Âncora",
      textLeft: -215,
    );
  }

  Widget image() {
    return FloatActionButtonText(
      onPressed: (){
        fabKey.currentState.animate();
      },
      icon: Icons.image,
      textLeft: -150,
      text: "Visualizar Rota",
    );
  }

  Widget inbox() {
    return FloatActionButtonText(
      onPressed: (){
        fabKey.currentState.animate();
      },
      icon: Icons.inbox,
      textLeft: -135,
      text: "Desbloquear",
    );
  }
...
Scaffold(
    floatingActionButton: AnimatedFloatingActionButton(
        key: fabKey,
        fabButtons: <Widget>[
            add(), 
            image(),
            inbox(),
        ],
        colorStartAnimation: Colors.blue,
        colorEndAnimation: Colors.red,
        animatedIconData: AnimatedIcons.menu_close //To principal button
    ),
)

Complete example here

搜尋分類、套件與程式碼儲存庫

安裝套件