Modal Bottom Sheet Beneath Floating Action Button

Question

I am trying to make the floating action button as the open and close button for the modal bottom sheet which requires the floating action button to be on top of the modal bottom sheet. Is there any possibility to achieve this with modal bottom sheet??

Here's my app:

What I am trying to achieve:

Prototype

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: Center(
        child: Text(
          'Home Screen',
          style: TextStyle(
            fontWeight: FontWeight.w900,
            fontStyle: FontStyle.italic,
          ),
        ),
      ),
      floatingActionButton: CustomFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: CustomBottomAppBar(),
    );
  }
}

import 'package:flutter/material.dart';

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

// [#] CustomFloatingActionButton
class CustomFloatingActionButton extends StatelessWidget {
  const CustomFloatingActionButton({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        useMaterial3: true,
        highlightColor: Colors.black,
      ),
      child: Transform.rotate(
        angle: 22 / 28,
        child: SizedBox(
          width: 60,
          height: 60,
          child: FloatingActionButton(
            heroTag: 'FAB',
            clipBehavior: Clip.antiAlias,
            splashColor: Colors.transparent,
            highlightElevation: 0,
            elevation: 0,
            backgroundColor: color1,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(16.0),
              ),
            ),
            onPressed: () {
              showModalBottomSheet(
                elevation: 0,
                enableDrag: false,
                backgroundColor: color4,
                barrierColor: darkBarrierColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24),
                    topRight: Radius.circular(24),
                  ),
                ),
                context: context,
                builder: (context) {
                  return CustomAddMenuScreen();
                },
              );
            },
            child: Transform.rotate(
              angle: 22 / 28,
              child: const Icon(
                Icons.add,
              ),
            ),
          ),
        ),
      ),
    );
  }
}