Android Compose Dialog only opens once

Question

I have started use Compose in my project. And I faced with problem and don't know how to solve it. I have a list with photos. When I click at photo , I show dialog in full screen with this photo. On photo I have close icon. When I click close icon, dialog close. But if I again want show this dialog, it doesn't show. My code:

@Composable
fun AnimalImagies(photoUrl: String) {
   var dialogOpen by remember {
        mutableStateOf(false)
    }

    if(dialogOpen){
        GetBifImage(photoUrl = photoUrl)
    }
    val imageLoader = LocalContext.current.imageLoader.newBuilder()
        .logger(DebugLogger())
        .build()
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(photoUrl)
            .crossfade(true)
            .build(),
        imageLoader = imageLoader,
        contentDescription = "",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(140.dp)
            .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
            .clickable(onClick = { dialogOpen = true })
    )
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun GetBifImage(photoUrl: String) {
    val shouldShowDialog = remember { mutableStateOf(true) }
    if (shouldShowDialog.value) {
        Dialog(
            properties = DialogProperties(usePlatformDefaultWidth = false),
            onDismissRequest = {shouldShowDialog.value = false}
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                ZoomImage(photoUrl)
                Image(painter = painterResource(id = R.drawable.ic_close_),
                    contentDescription = "",
                    modifier = Modifier
                        .align(Alignment.TopEnd)
                        .size(30.dp)
                        .clickable { shouldShowDialog.value=false }
                )
            }
        }
    }
}

Answer 1

You need to reset the sate of shouldShowDialog to true.

I recommend you create a lambda to GetBifImage composable as follows :

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun GetBifImage(photoUrl: String, onDismiss: () -> Unit) {
    Dialog(
        properties = DialogProperties(usePlatformDefaultWidth = false),
        onDismissRequest = { onDismiss.invoke() }
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            ZoomImage(photoUrl)
            Image(
                painter = painterResource(id = R.drawable.ic_close_),
                contentDescription = "",
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .size(30.dp)
                    .clickable { onDismiss.invoke() }
            )
        }
    }
}

So you need to modify your call to AnimalImagies

@Composable
fun AnimalImagies(photoUrl: String) {
   var dialogOpen by remember { mutableStateOf(false) }

    val imageLoader = LocalContext.current.imageLoader.newBuilder()
        .logger(DebugLogger())
        .build()
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(photoUrl)
            .crossfade(true)
            .build(),
        imageLoader = imageLoader,
        contentDescription = "",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(140.dp)
            .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
            .clickable(onClick = {
                dialogOpen = true
            })
    )

    if (dialogOpen) {
        GetBifImage(photoUrl = photoUrl) {
            dialogOpen = false
        }
    }
}

So now when you tap the Image then the lambda function will change dialogOpen