如何为Flutter的FloatingActionButton添加多个子组件？

方法1：给FloatingActionButton加自定义阴影+保留图标 #

你不需要移除图标，只需把Icon作为Container的子组件，就能让阴影和图标共存：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => AddTaskPage(),
      ),
    );
  },
  tooltip: 'Add Task',
  backgroundColor: Colors.blue,
  child: Container(
    decoration: BoxDecoration(
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(100),
      boxShadow: [
        BoxShadow(
          color: Colors.blue.withOpacity(0.3),
          spreadRadius: 7,
          blurRadius: 7,
          offset: const Offset(3, 5),
        ),
      ],
    ),
    // 将图标嵌套在Container内部
    child: const Icon(Icons.add, color: Colors.white),
  ),
),

方法2：添加多个子组件（用Stack） #

如果需要多个子组件，把Stack作为Container的子组件，在Stack里排列多个Widget即可，通过Positioned可以精准控制每个组件的位置：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => AddTaskPage(),
      ),
    );
  },
  tooltip: 'Add Task',
  backgroundColor: Colors.blue,
  child: Container(
    decoration: BoxDecoration(
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(100),
      boxShadow: [
        BoxShadow(
          color: Colors.blue.withOpacity(0.3),
          spreadRadius: 7,
          blurRadius: 7,
          offset: const Offset(3, 5),
        ),
      ],
    ),
    child: Stack(
      alignment: Alignment.center,
      children: [
        const Icon(Icons.add, color: Colors.white),
        // 示例：添加右上角的小红点标记
        Positioned(
          top: 5,
          right: 5,
          child: Container(
            width: 12,
            height: 12,
            decoration: const BoxDecoration(
              color: Colors.red,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ],
    ),
  ),
),

额外提示 #

如果只需要基础阴影，FloatingActionButton本身自带elevation和hoverElevation属性，直接调整数值就能添加默认阴影，不用嵌套Container：

floatingActionButton: FloatingActionButton(
  elevation: 8, // 常态阴影高度
  hoverElevation: 12, // 悬浮状态阴影高度
  // 其他属性...
),

内容的提问来源于stack exchange，提问作者Jillian D