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

套件詳情v0.0.2

animated_floating_buttons

允許您建立可摺疊的浮動按鈕清單。基於 Agung Surya 的教學。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
1190
喜歡數
118
Pub 分數
145

安裝套件

flutter pub add animated_floating_buttons

套件介紹

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

一個 Flutter 套件,可建立可摺疊的浮動操作按鈕,靈感來自 Agung Surya 的教學。它提供平滑的動畫效果,用於展開和收起一組浮動按鈕,提升移動與 Web 應用中的使用者互動體驗。此套件支援多個平台,包括 Android、iOS、Web、macOS、Windows 與 Linux,讓跨平台開發更具彈性。透過最少的設定,開發者可輕鬆將動畫按鈕群組整合至其介面中。

適用情境

  • 建立互動式底端導航並支援擴展動作
  • 透過動畫浮動按鈕增強應用介面
  • 設計基於手勢的介面
  • 向儀表板添加動態操作菜單

主要特色

  • 平滑的展開/收合動畫
  • 支援多個浮動按鈕
  • 跨平台相容性
  • 與現有 Flutter 項目輕鬆整合
  • 可自定義的按鈕佈局

適合對象

  • 行動與Web應用開發者
  • 尋求互動元件的UI設計師
  • 需要手勢驅動操作面板的專案
  • 使用 Flutter 開發多平台應用的開發者

使用建議

  • 按鈕過多時可能影響效能
  • 需要仔細的佈局規劃
  • 超出基本動畫之外的自定義功能有限
  • 最適合用於簡單、專注的操作群組

原始 README

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

animated_floating_buttons

This package is based on Agung Surya's tutorial. You can visit his post for more technical information about the package. https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc

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_floating_buttons: ^0.0.1

Example

//Import package
import 'package:animated_floating_buttons/animated_floating_buttons.dart';
...
      /// when you want to close the menu you have to create 
      final GlobalKey<AnimatedFloatingActionButtonState> key =GlobalKey<AnimatedFloatingActionButtonState>();
      /// and then assign it to the our widget library
Widget float1() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        heroTag: "btn1",
        tooltip: 'First button',
        child: Icon(Icons.add),
      ),
    );
}

Widget float2() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        heroTag: "btn2",
        tooltip: 'Second button',
        child: Icon(Icons.add),
      ),
    );
}
...
Scaffold(
    floatingActionButton: AnimatedFloatingActionButton(
        //Fab list
        fabButtons: <Widget>[
            float1(), float2()
        ],
        key : key,
        colorStartAnimation: Colors.blue,
        colorEndAnimation: Colors.red,
        animatedIconData: AnimatedIcons.menu_close //To principal button
    ),
)

Complete example here

Issues

Be aware that you have to pass heroTag parameter to every new fab you create 
Otherwise you will get an exciption.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。