androidandroid-jetpack-composebottom-sheet

How do I prevent the M3 Compose ModalBottomSheet from detaching when flinging inner LazyRow content?


I have a ModalBottomSheet and within I have a LazyColumn with a list of items. When I scroll quickly up or down, i.e. fling, that LazyColumn content, then the bottom sheet briefly detaches from the bottom or the top (depending on scroll direction). I want to remove this behaviour so that my ModalBottomSheet is firmly stuck to the bottom and the top (it's a full screen bottom sheet).

Does anyone have any idea how to achieve that? :)

I'm using the currently newest bottom sheet from this dependency: androidx.compose.material3:material3-android:1.2.0-alpha02

This is how it looks like: enter image description here

I've remove a lot of the content code, but in general the bottom sheet content is like this:

@Composable
fun BottomSheetContent() {
    Column(modifier = modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp)
                .verticalScroll(rememberScrollState())
                .weight(1f)
        ) {
            GenresSection(
                selectedGenres = selectedGenres,
            )
            
        }
        ResetAllAndApplyFilterButtonsRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp, horizontal = 16.dp)
        )
    }
}

@Composable
fun GenresSection(
    selectedGenres: List<Genre>,
    modifier: Modifier = Modifier,
) {
    LazyColumn(
        modifier = modifier.height(400.dp),
    ) {
        items(selectedGenres) { genre ->
            GenreChoiceRow(
                text = genre.name,
                modifier = Modifier.animateItemPlacement()
            )
        }
    }
}

I've tried an AI suggested approach of attaching a nestedScrollConnection where I adjusted the onPostFling behaviour to return 0 Velocity, so it wouldn't return any Velocity after flinging to the parent, but that didn't help. This was suggested by the phind.com AI:

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
            return super.onPostFling(consumed, Velocity.ZERO)
        }

        override suspend fun onPreFling(available: Velocity): Velocity {
            return super.onPreFling(available)
        }
    }
}

LazyColumn(
    modifier = Modifier.nestedScroll(nestedScrollConnection)
) {
    // Your scrollable content here
}

Solution

  • The issue is fixed in

        implementation("androidx.compose.material3:material3:1.3.0-alpha02")