← Back to Compose Multiplatform
ExtendedFloatingActionButton
Component
in
Compose Multiplatform
. Since 1.3.0-beta01
Overview
Examples
Community Notes
@Composable
fun ExtendedFloatingActionButtonTextSample() {
ExtendedFloatingActionButton(onClick = { /* do something */ }) {
Text(text = "Extended FAB")
}
}
@Composable
fun ExtendedFloatingActionButtonSample() {
ExtendedFloatingActionButton(
onClick = { /* do something */ },
icon = { Icon(Icons.Filled.Add, "Localized description") },
text = { Text(text = "Extended FAB") },
)
}
@Composable
fun AnimatedExtendedFloatingActionButtonSample() {
val listState = rememberLazyListState()
// The FAB is initially expanded. Once the first visible item is past the first item we
// collapse the FAB. We use a remembered derived state to minimize unnecessary compositions.
val expandedFab by remember {
derivedStateOf {
listState.firstVisibleItemIndex == 0
}
}
Scaffold(
floatingActionButton = {
ExtendedFloatingActionButton(
onClick = { /* do something */ },
expanded = expandedFab,
icon = { Icon(Icons.Filled.Add, "Localized Description") },
text = { Text(text = "Extended FAB") },
)
},
isFloatingActionButtonDocked = false,
floatingActionButtonPosition = FabPosition.End,
) {
LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
for (index in 0 until 100) {
item {
Text(
text = "List item - $index",
modifier = Modifier.padding(24.dp)
)
}
}
}
}
}
@Composable
fun SimpleExtendedFabWithIcon() {
ExtendedFloatingActionButton(
icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
text = { Text("ADD TO BASKET") },
onClick = { /*do something*/ }
)
}
@Composable
fun FluidExtendedFab() {
ExtendedFloatingActionButton(
icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
text = { Text("FLUID FAB") },
onClick = { /*do something*/ },
modifier = Modifier.fillMaxWidth()
)
}

Previous Component← ElevatedSuggestionChip
Next ComponentFilledIconButton →
