1

Hey guys I am working in ripple effect in jetpack compose. I create one function for ripple effect and use this function to Material button. When I call the Material button inside LaunchEffect it's giving me error.

@Composable invocations can only happen from the context of a @Composable function

I followed this two stack overflow answer 1 and answer 2 but nothing works.

This is my ripple effect function which I am using so many places.

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ClickableItemContainer(
    rippleColor: Color = TealLight,
    content: @Composable (MutableInteractionSource) -> Unit,
    clickAction: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    var userClickAction by remember { mutableStateOf(false) }
    if (userClickAction) {
        clickAction()
    } else {
        CompositionLocalProvider(
            AbcRippleTheme provides AbcRippleTheme(rippleColor),
            content = {
                Surface(
                    onClick = { userClickAction = true },
                    interactionSource = interactionSource,
                    indication = rememberRipple(true),
                    color = White
                ) {
                    content(interactionSource)
                }
            }
        )
    }
}

I called this function into my Material button

@Composable
fun AbcMaterialButton(
    text: String,
    spacerHeight: Dp,
    onActionClick: () -> Unit
) {
    Spacer(modifier = Modifier.height(spacerHeight))
    var userActionClick by remember { mutableStateOf(false) }
    if (userActionClick) {
        onActionClick()
    } else {
        ClickableItemContainer(rippleColor = AquaDarker, content = {
            Box(
                modifier = Modifier
                    .clip(RoundedCornerShape(10.dp)
                    .background(Aqua)
                    .fillMaxWidth(),
            ) {
                Text(
                    text = text,
                    modifier = Modifier
                        .padding(10.dp)
                        .align(Alignment.Center)
                )
            }
        }) {
            userActionClick = true
        }
    }
}

When I called AbcMaterialButton I am getting error

@Composable
fun BluetoothRequestContinue(multiplePermissionsState: MultiplePermissionsState) {
    LaunchedEffect(multiplePermissionsState) {
        AbcMaterialButton(
            text = stringResource(R.string.continue_text),
            spacerHeight = 10.dp
        ) {

            multiplePermissionsState.launchMultiplePermissionRequest()
        }
    }
}

enter image description here

After @Mark suggestion I tried this piece of code

@Composable
fun BluetoothRequestContinue(multiplePermissionsState: MultiplePermissionsState) {
    var launchPermission by remember { mutableStateOf(false) }
    if (launchPermission) {
        LaunchedEffect(Unit) {
            multiplePermissionsState.launchMultiplePermissionRequest()
        }
    } else {
        AbcMaterialButton(
            text = stringResource(R.string.continue_text),
            spacerHeight = 10.dp
        ) {
            launchPermission = true
        }
    }
}

Is there any problem if I used like this way?

Kotlin Learner
  • 3,995
  • 6
  • 47
  • 127

0 Answers0