2

I'm trying to create a Material 3 Floating Action Button in Jetpack Compose that expands into a Sheet with multiple options on click. I'm trying to achieve something like this:

Material 3 Fab Transform

The above example is from the Material 3 website. However, I haven't got any idea on how to implement such a thing. I tried searching for it online but almost all of the tutorials show transforming a FAB into multiple other FABs on click.

I tried modifying an ExtendedFloatingActionButton but didn't get the results I wanted. I also tried using AnimatedContent to animate between a normal FloatingActionButton and a Column with multiple Rows containing other options but still couldn't get the required results.

Any guidance would be appreciated. Thanks in advance!

Chandresh Parmar
  • 176
  • 1
  • 10

1 Answers1

0

In material 3 this behaviour called Container transform you can check a sample for it here

it's planned to be in compose but its not there yet unfortunately check this

here you can find some guild-lines and best practises for designing a container transform pattern

for your exact request you an do it using updateTransition and AnimatedVisibility or AnimatedContent apis.

Raafat Alhmidi
  • 1,106
  • 12
  • 18