如何让Floating Action Button悬浮于Modal Bottom Sheet之上并作为其开关？

我想把Floating Action Button（FAB）作为Modal Bottom Sheet的打开和关闭按钮，需要让FAB悬浮在Modal Bottom Sheet的上方，请问用Modal Bottom Sheet能实现这个效果吗？

应用现状 #

目标效果原型 #

解决方案 #

默认的showModalBottomSheet会覆盖Scaffold的FAB，要实现FAB悬浮在Sheet上方，需将FAB集成到BottomSheet内容中，通过Stack和Positioned控制位置，同时区分FAB的两种状态（打开/关闭Sheet）。

修改后的核心代码 #

1. 支持状态切换的自定义Floating Action Button

import 'package:flutter/material.dart';

import '../constants/constants.dart';
import '../screens/add_menu_screen.dart';

class CustomFloatingActionButton extends StatelessWidget {
  final bool isSheetOpen;

  const CustomFloatingActionButton({
    super.key,
    this.isSheetOpen = false,
  });

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        useMaterial3: true,
        highlightColor: Colors.black,
      ),
      child: Transform.rotate(
        angle: isSheetOpen ? 0 : 22 / 28,
        child: SizedBox(
          width: 60,
          height: 60,
          child: FloatingActionButton(
            heroTag: isSheetOpen ? 'FAB_Sheet' : 'FAB',
            clipBehavior: Clip.antiAlias,
            splashColor: Colors.transparent,
            highlightElevation: 0,
            elevation: isSheetOpen ? 4 : 0,
            backgroundColor: color1,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(16.0)),
            ),
            onPressed: isSheetOpen
                ? () => Navigator.pop(context)
                : () {
                    showModalBottomSheet(
                      elevation: 0,
                      enableDrag: false,
                      backgroundColor: color4,
                      barrierColor: darkBarrierColor,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(24),
                          topRight: Radius.circular(24),
                        ),
                      ),
                      context: context,
                      builder: (context) {
                        return Stack(
                          clipBehavior: Clip.none,
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(top: 40),
                              child: const CustomAddMenuScreen(),
                            ),
                            Positioned(
                              top: -30,
                              left: MediaQuery.of(context).size.width / 2 - 30,
                              child: CustomFloatingActionButton(isSheetOpen: true),
                            ),
                          ],
                        );
                      },
                    );
                  },
            child: Icon(isSheetOpen ? Icons.close : Icons.add),
          ),
        ),
      ),
    );
  }
}

2. HomeScreen 保持原有结构

import 'package:flutter/material.dart';

import '../screens/account_screen.dart';
import '../screens/activity_screen.dart';
import '../screens/planning_screen.dart';
import '../widgets/custom_bottom_app_bar.dart';
import '../widgets/custom_floating_action_button.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text(
          'Home Screen',
          style: TextStyle(
            fontWeight: FontWeight.w900,
            fontStyle: FontStyle.italic,
          ),
        ),
      ),
      floatingActionButton: const CustomFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: const CustomBottomAppBar(),
    );
  }
}

关键实现要点 #

• 悬浮定位：用Stack + Positioned将FAB放在Sheet顶部上方，top: -30让FAB一半露出Sheet外，营造悬浮效果。
• 内容避挡：给CustomAddMenuScreen添加顶部padding，避免Sheet内容被FAB遮挡。
• 状态切换：通过isSheetOpen参数切换FAB的图标、旋转角度和点击逻辑，打开状态下点击FAB直接关闭Sheet。
• 避免动画冲突：给不同状态的FAB设置不同heroTag，防止Hero动画报错。

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