Android端能否实现指定展开布局的Flutter Floating Action Button？

完全可以实现你要的自定义FAB展开布局，现成的Speed Dial组件因为布局逻辑固定，可能无法匹配你的设计需求，直接通过自定义StatefulWidget结合动画组件就能搞定，以下是具体实现思路和示例代码：

核心实现思路 #

1. 用StatefulWidget维护展开/收起的状态（比如一个布尔值_isExpanded）
2. 借助AnimatedContainer、AnimatedOpacity这类动画组件，实现展开时的平滑过渡效果
3. 主FAB作为触发按钮，点击后切换状态，控制子按钮的显示/隐藏及布局位置
4. 子按钮可按需排列（横向、纵向、甚至自定义路径），完全匹配你的设计样式

示例代码 #

import 'package:flutter/material.dart';

class CustomExpandingFab extends StatefulWidget {
  const CustomExpandingFab({super.key});

  @override
  State<CustomExpandingFab> createState() => _CustomExpandingFabState();
}

class _CustomExpandingFabState extends State<CustomExpandingFab> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomRight,
      children: [
        // 展开后的子按钮区域
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          width: _isExpanded ? 280 : 0,
          height: 60,
          margin: const EdgeInsets.only(right: 16, bottom: 16),
          child: _isExpanded
              ? Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    IconButton(
                      icon: const Icon(Icons.add_photo_alternate),
                      onPressed: () {
                        // 处理点击事件
                        setState(() => _isExpanded = false);
                      },
                      style: IconButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: Colors.blue,
                        shape: const CircleBorder(),
                      ),
                    ),
                    const SizedBox(width: 12),
                    IconButton(
                      icon: const Icon(Icons.camera_alt),
                      onPressed: () {
                        // 处理点击事件
                        setState(() => _isExpanded = false);
                      },
                      style: IconButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: Colors.blue,
                        shape: const CircleBorder(),
                      ),
                    ),
                    const SizedBox(width: 12),
                    IconButton(
                      icon: const Icon(Icons.document_scanner),
                      onPressed: () {
                        // 处理点击事件
                        setState(() => _isExpanded = false);
                      },
                      style: IconButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: Colors.blue,
                        shape: const CircleBorder(),
                      ),
                    ),
                  ],
                )
              : const SizedBox(),
        ),
        // 主FAB按钮
        FloatingActionButton(
          onPressed: () => setState(() => _isExpanded = !_isExpanded),
          child: Icon(_isExpanded ? Icons.close : Icons.add),
        ),
      ],
    );
  }
}

// 使用示例
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("自定义FAB展开示例")),
      body: const Center(child: Text("主内容区域")),
      floatingActionButton: const CustomExpandingFab(),
    );
  }
}

自定义调整方向 #

如果需要纵向展开，只需要把Row换成Column，调整AnimatedContainer的height属性即可，比如：

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: 60,
  height: _isExpanded ? 200 : 0,
  margin: const EdgeInsets.only(right: 16, bottom: 16),
  child: _isExpanded
      ? Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            // 子按钮...
          ],
        )
      : const SizedBox(),
)

额外优化点 #

• 可以给子按钮添加淡入淡出动画，配合AnimatedOpacity使用
• 调整动画曲线（比如Curves.elasticOut）让展开效果更自然
• 给子按钮添加点击反馈，比如波纹效果
• 根据设计需求修改按钮的背景色、图标颜色、圆角等样式

内容的提问来源于stack exchange，提问作者Anamika Singh