Composable Component

SwipeToDismiss

A composable that can be dismissed by swiping left or right.

SwipeToDismiss

Common
@Composable
@ExperimentalMaterialApi
fun SwipeToDismiss(
    state: DismissState,
    modifier: Modifier = Modifier,
    directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd),
    dismissThresholds: (DismissDirection) -> ThresholdConfig = {
        FixedThreshold(DISMISS_THRESHOLD)
    },
    background: @Composable RowScope.() -> Unit,
    dismissContent: @Composable RowScope.() -> Unit,
) =
    BoxWithConstraints(modifier) {
        val width = constraints.maxWidth.toFloat()
        val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl

        val anchors = mutableMapOf(0f to Default)
        if (StartToEnd in directions) anchors += width to DismissedToEnd
        if (EndToStart in directions) anchors += -width to DismissedToStart

        val thresholds = { from: DismissValue, to: DismissValue ->
            dismissThresholds(getDismissDirection(from, to)!!)
        }
        val minFactor =
            if (EndToStart in directions) StandardResistanceFactor else StiffResistanceFactor
        val maxFactor =
            if (StartToEnd in directions) StandardResistanceFactor else StiffResistanceFactor
        Box(
            Modifier.swipeable(
                state = state,
                anchors = anchors,
                thresholds = thresholds,
                orientation = Orientation.Horizontal,
                enabled = state.currentValue == Default,
                reverseDirection = isRtl,
                resistance =
                    ResistanceConfig(
                        basis = width,
                        factorAtMin = minFactor,
                        factorAtMax = maxFactor,
                    ),
            )
        ) {
            Row(content = background, modifier = Modifier.matchParentSize())
            Row(
                content = dismissContent,
                modifier = Modifier.offset { IntOffset(state.offset.value.roundToInt(), 0) },
            )
        }
    }

Parameters

state The state of this component.
modifier Optional Modifier for this component.
directions The set of directions in which the component can be dismissed.
dismissThresholds The thresholds the item needs to be swiped in order to be dismissed.
background A composable that is stacked behind the content and is exposed when the content is swiped. You can/should use the state to have different backgrounds on each side.
dismissContent The content that can be dismissed.