Search code examples
androidkotlinstatehoistingmutablestateof

Mutablestateof - State hoisting


What to do to manage one state in two functions? (openDialog) How to transfer openDialog state from ProductDialog() to AppBar()? I know I can make a separate class per state but I don't want to.

@Composable
fun ProductDialog() {
    val openDialog = rememberSaveable() { mutableStateOf(true) }
    val productNameState = remember { mutableStateOf("") }

    AlertDialog(
        onDismissRequest = { openDialog.value = false },
        title = { Text(
            modifier = Modifier.padding(bottom = 8.dp),
            text = "Add new product",
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold
        ) },
        confirmButton = { Button(onClick = { openDialog.value = false }) {
            Text(text = "Add") }
        },
        dismissButton = { Button(onClick = { openDialog.value = false }) {
            Text(text = "Cancel")
            }
        },
        text = {
            Column() {
                TextField(value = productNameState.value, onValueChange = {
                })
                TextField(value = productNameState.value, onValueChange = {})
            }
        }
    )
}

@Composable
fun AppBar() {
    val openDialog = rememberSaveable() { mutableStateOf(false) }

    if (openDialog.value) ProductDialog()

    Scaffold(
        topBar = {
                TopAppBar(
                    actions = { Icon(imageVector = Icons.Default.Menu, contentDescription = null) },
                    title = { Text(text = "Shopping List Compose") })
                },
        floatingActionButton = {
            FloatingActionButton(modifier = Modifier.padding(10.dp), onClick = { openDialog.value = true }) {
            Icon(Icons.Default.Add, contentDescription = null)
        }}
    ) {
        ListItems()
    }
}

What to do to manage one state in two functions? (openDialog)


Solution

  • From the example you shared, it seems that the only use of openDialog in ProductDialog is to close the dialog. You can instead paas a lambda to ProductDialog to close the dialog.

    @Composable
    fun ProductDialog(closeDialog: () -> Unit) {
        AlertDialog(
            onDismissRequest = closeDialog,
            title = { ... },
            confirmButton = { 
                Button(onClick = closeDialog) {
                    Text(text = "Add")
                }
            },
            dismissButton = { 
                Button(onClick = closeDialog) {
                    Text(text = "Cancel")
                }
            },
            text = { ... }
        )
    }
    
    @Composable
    fun AppBar() {
        val openDialog by rememberSaveable() { mutableStateOf(false) }
    
        if (openDialog) ProductDialog { openDialog = false}
    
       ...
    }