I have a compile time error as shown in the title

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

I have one card in this code so I want to show An AlertDialog after clicking the card clickable,

I know that this problem is exist in the platform, So how can i solve this problem?

@Composable
fun Screen_A_with_WithTopBar(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {
                        navController.navigate(Screen.Home.route)
                    }) {
                        Icon(Icons.Filled.Menu, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {

        Screen_A(navController)

    }
)
}



@Composable
fun Screen_A(navController: NavController) {
    val context = LocalContext.current

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxSize()
        //.background(ScreenColor)
) {

    Text(
        text = "Dooro",
        fontSize = 42.sp
    )

    Spacer(modifier = Modifier.height(33.dp))

    Row(
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.SpaceAround,
        modifier = Modifier
            .fillMaxWidth()
            .padding(12.dp),
    ) {

        Card(
            modifier = Modifier
                .width(150.dp)
                .height(80.dp)
                .clickable {

                    Alert()

                },
            RoundedCornerShape(7.dp),
            elevation = 7.dp
            //.padding(40.dp)
        ) {
            Text(
                text = "None",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center
            )
        }


    } // END Row

}

}

@Composable
fun Alert() {
    val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text(
                "This area typically contains the supportive text "  
                        "which presents the details regarding the Dialog's purpose."
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { openDialog.value = false }
                ) {
                    Text("Dismiss")
                }
            }
        }
    )
}
}

CodePudding user response：

Here you can use mutableStateOf to be able to show your Alert.

on Screen_A, you should add the following

var showAlert by mutableStateOf(false)


@Composable
private fun ShowAlert() {
    if (showAlert)
        Alert()
}

Finally in your Card, you will change the value of showAlert field to true.

        Card(
        modifier = Modifier
            .width(150.dp)
            .height(80.dp)
            .clickable {
               showAlert = true
            },
        RoundedCornerShape(7.dp),
        elevation = 7.dp
        //.padding(40.dp)
    )