Flutter如何实现悬浮按钮菜单

在Flutter中，我想实现一个类似微信右下角的悬浮按钮菜单，点击主按钮后能展开子菜单项。目前尝试了FloatingActionButton和PopupMenuButton，但无法实现展开动画和自由定位的效果。请问该如何实现这种带展开动画的悬浮菜单？最好能自定义按钮样式和位置，同时支持点击事件回调。有没有推荐的第三方库或完整的实现示例？

2 回复

在Flutter中，使用FloatingActionButton和showModalBottomSheet或SpeedDial库实现悬浮按钮菜单。步骤如下：

  1. 添加floatingActionButton到Scaffold。
  2. 点击按钮时调用showModalBottomSheet弹出菜单。
  3. 或使用speed_dial库快速创建多功能悬浮按钮。

示例代码：

FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(context: context, builder: (context) => YourMenuWidget());
  },
  child: Icon(Icons.add),
)

更多关于Flutter如何实现悬浮按钮菜单的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，实现悬浮按钮菜单通常使用FloatingActionButton结合SpeedDial或PopupMenuButton等组件。以下是两种常用方法：

1. 使用Speed Dial（推荐）

需要添加flutter_speed_dial依赖：

dependencies:
  flutter_speed_dial: ^6.0.0

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';

class FloatingMenuPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('悬浮菜单')),
      floatingActionButton: SpeedDial(
        icon: Icons.add, // 主按钮图标
        activeIcon: Icons.close, // 展开时图标
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        children: [
          SpeedDialChild(
            child: Icon(Icons.share),
            backgroundColor: Colors.green,
            label: '分享',
            onTap: () => print('分享'),
          ),
          SpeedDialChild(
            child: Icon(Icons.favorite),
            backgroundColor: Colors.red,
            label: '收藏',
            onTap: () => print('收藏'),
          ),
        ],
      ),
    );
  }
}

2. 使用PopupMenuButton

FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Wrap(
        children: [
          ListTile(
            leading: Icon(Icons.share),
            title: Text('分享'),
            onTap: () {
              Navigator.pop(context);
              // 执行分享操作
            },
          ),
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('收藏'),
            onTap: () {
              Navigator.pop(context);
              // 执行收藏操作
            },
          ),
        ],
      ),
    );
  },
  child: Icon(Icons.add),
)

特点对比：

  • SpeedDial：动画效果丰富，支持展开/收起动画，用户体验更好
  • PopupMenuButton：使用系统原生组件，样式统一，代码更简洁

建议优先使用flutter_speed_dial包，它提供了更完善的悬浮菜单功能和动画效果。

回到顶部