How to link reusable ExtendedFloatingActionButton with reusable Scaffold

Question

Expected result:

Reusable ExtendedFloatingActionButton should expand or collapse within a reusable Scaffold when I scroll.

Current result:

ExtendedFloatingActionButton does not expand or collapse when I scroll the list in my Scaffold

I followed this tutorial, but it was not created with reusability in mind. The part I'm confused about is the listState varible within the section called "Joining Everything Together" because I'm not sure where within my code I need to declare it as I have done this a few times in different areas.

@Composable
fun MyReusableScaffold(scaffoldTitle: String, scaffoldFab: @Composable () -> Unit,
                        scaffoldContent: @Composable (contentPadding: PaddingValues) -> Unit) {
    Scaffold(
        topBar = { LargeTopAppBar( title = { Text(text = scaffoldTitle) } ) },
        floatingActionButton = { scaffoldFab },
        content = { contentPadding -> scaffoldContent(contentPadding = contentPadding) }
    )
}

@Composable
fun MyFAB(listState: LazyListState) {
    ExtendedFloatingActionButton(
        text = { Text(text = "title") },
        icon = { Icon(Icons.Filled.Add, "") },
        expanded = listState.isScrollingUp()
    )
}

@Composable
fun <T> MyLazyColumn(modifier: Modifier,
...
) {
    val listState = rememberLazyListState()

    LazyColumn(
        state = listState
    ) {
        ...
    }
}

@Composable
fun MyHomeScreen() {
    MyScaffold(
        scaffoldTitle = "title",
        scaffoldFab = MyExtendedFAB(listState = LazyListState?)
        scaffoldContent = { MyHomeScreenContent(contentPadding = it) },
    )
}

@Composable
fun MyHomeScreenContent(
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues()
) {
}

Gabriele Mariotti · Accepted Answer · 2022-12-11T07:52:47.350

The expansion state of the ExtendedFloatingActionButton is managed by the expanded.

In your example the expanded state is derived on the listState of the LazyColumn. It means that LazyColumn and ExtendedFloatingActionButton have to use both the same listState.

For example you can do something like:

@Composable
fun MyHomeScreen() {

    val listState = rememberLazyListState()

    val expandedFab by remember {
        derivedStateOf {
            listState.firstVisibleItemIndex == 0
        }
    }

    MyReusableScaffold(
        scaffoldTitle = "title",
        scaffoldFab = { MyFAB(expandedFab) },
        scaffoldContent = { MyHomeScreenContent(contentPadding = it, listState = listState) },
    )
}

fun MyFAB(expandedFab : Boolean) {

    ExtendedFloatingActionButton(
        //...
        expanded = expandedFab
    )
}

@Composable
fun MyLazyColumn(modifier: Modifier = Modifier,
                listState: LazyListState
) {
    LazyColumn(
        state = listState
    ) { /** ... */ }
}

@Composable
fun MyHomeScreenContent(
    modifier: Modifier = Modifier,
    listState: LazyListState,
    contentPadding: PaddingValues = PaddingValues()
) {
    MyLazyColumn( listState = listState )
}

Whenever I want to use `MyLazyColumn` for the content of my screen, do I need to use `LazyListState` for the `listState`? For example, `listState = LazyListState` — wbk727, Dec 11 '22 at 00:11

How to link reusable ExtendedFloatingActionButton with reusable Scaffold

1 Answers1