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

ducafecatFlutter 生态导航
animated_fab_button_menu 封面
插件详情v0.0.2

animated_fab_button_menu

用于实现带可滚动菜单的动画浮动按钮的 Flutter 包。

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文档 源代码
近 30 天下载
61
喜欢数
27
Pub 分数
150

安装插件

flutter pub add animated_fab_button_menu

插件介绍

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

一个 Flutter 包，可创建带有可滚动菜单的动画浮动操作按钮（FAB）。它通过将 FAB 平滑展开为可自定义菜单来增强用户交互，非常适合需要直观访问多个操作的应用程序。该菜单支持滚动，适用于超出屏幕空间的选项列表。专为现代 UI 设计，可在跨平台环境中无缝集成，并保持一致的行为。

适合场景

  • 增强移动应用导航
  • 创建交互式操作中心
  • 提高对多个功能的访问性
  • 设计响应式界面
  • 为浮动操作按钮添加动态过渡效果

主要特点

  • 平滑的动画展开
  • 可滚动菜单支持
  • 跨平台兼容性
  • 可自定义的菜单项
  • 响应式设计集成

适合对象

  • 移动应用开发者
  • UI/UX 设计师
  • 交互式原型构建工具
  • Flutter 初学者
  • 具有复杂操作工作流的应用程序

使用建议

  • 可能需要额外的样式来实现自定义
  • 大型菜单的性能影响
  • 仅限基于 FAB 的交互
  • 不适用于不可滚动的动作集
  • 依赖于平台特定的手势处理

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated FAB Menu

Animated FAB Menu package lets you add an animated floating action button to your Flutter app that open a list of menu items.

Features

The FabMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton widget. Its position is set by the fabAlignment property so you don't need to set it with the Scaffold.floatingActionButtonLocation argument. By default the position is set to bottomCenter, but you can change it by the fabAlignment property to place the button anywhere in the screen. By using the fabIcon and fabBackgroundColorproperties, you can change the icon and the color of the button to whatever you like.

  • Menu

By pressing the floating action button, a page containing a menu list will be opening with some cool animation. This menu contains items that you can specify by the children list property. Every child inside the list takes a title for the item name, style for the text widget of the name, onTap function to provide the logic of the on tap action on each child. On top of that, you have an overlayColor property to change the color of the background opened page, overlayOpacity to change the opacity of the background color and closeMenuButton to choose your own back button widget.

The package will handle the animation by itself.

animated_fab_menu

Getting started

  1. Add the latest version of package to your pubspec.yaml (and run dart pub get):
dependencies:
  animated_fab_button_menu: ^0.0.2
  1. Import the package and use it in your Flutter App.
import 'package:animated_fab_button_menu/animated_fab_button_menu.dart';

Usage

There are a number of properties that you can modify:

  • fabIcon
  • fabBackgroundColor
  • fabAlignment
  • overlayColor (Color of the background menu)
  • overlayOpacity (Opacity of the background menu color)
  • elevation
  • closeMenuButton (Button that close the menu item)
  • children (Items of the menu)
  • title (Name of the child menu)
  • style (Text style for the child menu)
  • onTap (onTap function for the child menu)

Example Usage ( complete with all params ):

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FabMenu(
          fabBackgroundColor: Colors.amber,
          elevation: 2.0,
          fabAlignment: Alignment.bottomCenter,
          fabIcon: const Icon(Icons.more_horiz),
          closeMenuButton: const Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
          overlayOpacity: 0.5,
          overlayColor: Colors.amber,
          children: [
            MenuItem(
              title: 'Home',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: 'Profile',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: 'Messages',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: 'Feedback',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: 'Settings',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: 'Share',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
            MenuItem(
              title: 'Get in touch!',
              onTap: () {},
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),
            ),
          ]),
      body: const Center(
        child: Text('Flutter animated FAB Menu'),
      ),
    );
  }
}
Here's what it looks like:

https://user-images.githubusercontent.com/68671238/134640734-751456fa-686b-4e77-bc8d-04ba3a324baf.mp4

Next Goals

We are working on some improvements including:

  • [x] Change color and opacity for menu background. Change color and opacity by specifying overlayColor and overlayOpacity properties.
  • [ ] Make the distance between menu items customizable.
  • [ ] Change opening animation with more smooth and user friendly one.

Issues & Feedback

Please file an issue! to send feedback or report a bug. Thank you!

所属分类

浮动操作按钮

源码仓库

使用此插件的项目

暂无相关数据。