Modal Bottom Sheet Beneath Floating Action Button - flutter

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,
),
),
),
),
),
);
}
}