skydoves / FlexibleBottomSheet

🐬 Advanced Compose Multiplatform bottom sheet for segmented sizing, non-modal type, and allows interaction behind the bottom sheet similar to Google Maps.
Apache License 2.0
687 stars 30 forks source link

BottomSheet not fully hidden #10

Closed ndriqimh closed 6 months ago

ndriqimh commented 6 months ago

Bottom Sheet is slightly visible at the bottom when it's hidden. You can see the WHITE line at the end of the photo

FlexibleBottomSheet(
        sheetState = sheetState,
        windowInsets = WindowInsets.waterfall,
        tonalElevation = 0.dp,
        shape = RectangleShape,
        onDismissRequest = {
            //NOOP
        },
        containerColor = White,
)
FlexibleSheetState(
                flexibleSheetSize = FlexibleSheetSize(fullyExpanded = fullyExpandedRatio),
                isModal = false,
                skipSlightlyExpanded = true,
                skipIntermediatelyExpanded = true,
                containSystemBars = true,
                allowNestedScroll = true,
                animateSpec = SwipeableV2Defaults.AnimationSpec,
)

FlexibleBottomSheet

skydoves commented 6 months ago

Hi @ndriqimh, which device do you use?

ndriqimh commented 6 months ago

Hey @skydoves, I already mentioned, it is Samsung Galaxy A13 with Android 13.0. I also tested on emulators Pixel 4(API 33) and Pixel 7(API 34).

During some more testing I noticed that even when initial state is Hidden if fullyExpanded is set to 1f, the sheet would automatically show. Then I set it to 0f, so it wouldn't show first time. This resulted to show that the bottom sheet is fully hidden without the white line in this first time launch. But when I open it and close it, it doesn't fully close properly as explained before. I don't have much time to check the code, but probably it should be some wrong calculation when hiding it.

    var fullyExpandedRatio by remember { mutableFloatStateOf(0f) }
skydoves commented 6 months ago

I'm wondering if it only happens when you close the sheet using the hide() method.

ndriqimh commented 6 months ago

It was happening also during closing with swipe. I made a quick fix using this code below, this fixes when closing with swipe, but not when closing using hide(), probably because the callback onDismissRequest isn't being called

    // Using this alpha because sheet doesn't fully hides
    // Should be fixed in new versions
    var alpha by remember { mutableFloatStateOf(1f) }

    FlexibleBottomSheet(
        modifier = Modifier.alpha(alpha),
        sheetState = sheetState,
        windowInsets = WindowInsets.waterfall,
        tonalElevation = 0.dp,
        shape = RectangleShape,
        onDismissRequest = {
            alpha = 0f
        },
        onTargetChanges = {
            alpha = 1f
        },
        containerColor = Color.White,
    )
skydoves commented 6 months ago

Hey @ndriqimh, I appreciate your detailed description! I just fixed this issue, and it was published on the 0.1.2-SNAPSHOT. Would you please check it out to see if it works as well as you expected before releasing the stable? Thank you!

ndriqimh commented 6 months ago

Hey @skydoves, It seems this versions isn't pushed in maven, I get this Failed to resolve: com.github.skydoves:flexible-bottomsheet-material3:0.1.2-SNAPSHOT In the meantime if you can check another issue. As per shared code before, I'm just using fullyExtended per this case of mine

flexibleSheetSize = FlexibleSheetSize(
                    fullyExpanded = fullyExpandedRatio,
                    intermediatelyExpanded = 0f,
                    slightlyExpanded = 0f,
                ),

When I use a scrollable composable like a LazyColumn or a vertically scrollable Column, with allowNestedScroll = true, I can drag/fling the bottom sheet to dismiss but it doesn't hide it. Let's say I'm dragging/flinging it down, when I release the finger the sheet goes right back up to fullyExpanded size again.

skydoves commented 6 months ago

Hey @ndriqimh, 0.1.2-SNAPSHOT already has been published.

You need to add the maven download link to your gradle settings.

repositories {
   maven(url = "https://oss.sonatype.org/content/repositories/snapshots/")
}
ndriqimh commented 6 months ago

Hey @skydoves looks good with this, thank you! Let me know if you have anything on the other issue I mentioned.

skydoves commented 6 months ago

Hey @ndriqimh, would you create another issue with any screenshots on that? Thank you!

skydoves commented 6 months ago

This issue will be delivered in the next stable release. Thanks for helping on this issue!