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

套件詳情v0.1.0

animated_floatactionbuttons

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

近 30 天下載
342
喜歡數
33
Pub 分數
15

安裝套件

flutter pub add animated_floatactionbuttons

套件介紹

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

一個 Flutter 套件,可建立可摺疊的浮動操作按鈕選單,讓多個動作能被分組於單一可擴展按鈕之下。靈感來自 Agung Surya 的教學,提供順暢的動畫與直覺的互動,用於在緊湊的介面中組織相關動作。此套件透過減少雜亂,同時維持對次要功能的可存取性,提升使用者體驗。非常適合需要多個浮動操作但不需要隨時顯示的應用程式。

適用情境

  • 建立可擴展的操作選單
  • 減少移動螢幕上的使用者介面雜亂
  • 分組相關的浮動操作
  • 改進基於手勢的導航
  • 增強應用介面美學

主要特色

  • 平滑的展開/收合動畫
  • 可自定義的按鈕佈局
  • 支援多個子按鈕
  • 與現有 UI 的輕鬆整合
  • 輕量且高效

適合對象

  • 帶有許多浮動操作的移動應用
  • 尋求互動式UI元素的設計師
  • 使用材質設計原則的開發人員
  • 需要乾淨、極簡介面的應用程式
  • 遵循現代使用者體驗模式的專案

使用建議

  • 指定的平台支援有限
  • 無內建主題選項
  • 需要手動處理動畫狀態
  • 不適合複雜的嵌套互動
  • 可能需要額外的樣式來自訂視覺效果

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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。