FloatingActionButton

Material	Material 3

Los FloatingActionButton representan la acción más importante de la pantalla. Como norma general solo contienen un icono y están situados en la parte inferior derecha.

Implementación

Definición del componente

Material

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
)

Atributo	Descripción
onClick	Función lambda que se ejecutará cuando el usuario pulse el botón.
modifier	Modificador que implementará el composable.
interactionSource	Representa un stream de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
shape	Define la forma del FloatingActionButton y su sombra.
backgroundColor	El color del fondo del componente.
contentColor	Color del contenido.
elevation	Permite modificar la elevación del componente en sus distintos estados con el objeto FloatingActionButtonElevation.
content	Contenido a mostrar dentro del FloatingActionButton.

Material 3

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.shape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit,
)

Atributo	Descripción
onClick	Función lambda que se ejecutará cuando el usuario pulse el botón.
modifier	Modificador que implementará el composable.
shape	Define la forma del FloatingActionButton y su sombra.
containerColor	El color del fondo del componente.
contentColor	Color del contenido.
elevation	Permite modificar la elevación del componente en sus distintos estados con el objeto FloatingActionButtonElevation.
interactionSource	Representa un stream de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
content	Contenido a mostrar dentro del FloatingActionButton.

Fuente

Puedes acceder a la documentación oficial de Google desde aquí.

Ejemplos

Material

@Composable
fun FloatingActionButtonExample() {
    FloatingActionButton(onClick = { print("Hello") }) {
        Icon(Icons.Filled.Favorite, "Floating action button.")
    }
}

Material 3

@Composable
fun FloatingActionButtonExample() {
    FloatingActionButton(onClick = { print("Hello") }) {
        Icon(Icons.Filled.Favorite, "Floating action button.")
    }
}