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

搜索插件、代码仓与 APP 分类

安装插件