How to do a smooth expandable Floating Action Button Jetpack Compose that closes on outside click?

I want to create a Floating Action Button (FAB) in Jetpack Compose that, when clicked, expands into a menu with multiple clickable buttons. The menu should open and close with smooth animations. Additionally, the menu should close either when clicking on the FAB again or when clicking outside the menu.

Here are the key requirements:

The Floating Action Button opens a menu with multiple buttons.
The buttons in the menu should appear with smooth animations.
Clicking outside the menu or on the FAB should close the menu with a smooth transition.
The implementation should be in Jetpack Compose.
I’m unsure how to handle the animations and detect clicks outside the menu to close it properly. What’s the best approach to achieve this?

Any help or examples would be greatly appreciated

You need to sign in to view this answers