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

插件详情v0.0.2

animated_floating_buttons

允许您创建一个可折叠的浮动按钮列表。基于 Agung Surya 的教程。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1100
喜欢数
118
Pub 分数
145

安装插件

flutter pub add animated_floating_buttons

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,可创建可折叠的浮动操作按钮,灵感来自 Agung Surya 的教程。它提供了平滑的动画效果,用于展开和收起一组浮动按钮,从而增强移动和 Web 应用中的用户交互体验。该包支持多种平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,使其适用于跨平台开发。通过最少的设置,开发者可以轻松地将动画按钮组集成到他们的 UI 中。

适合场景

  • 创建带有可扩展操作的交互式底部导航
  • 通过动画浮动按钮增强应用界面
  • 设计基于手势的界面
  • 向仪表板添加动态操作菜单

主要特点

  • 平滑的展开/折叠动画
  • 支持多个浮动按钮
  • 跨平台兼容性
  • 与现有 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。